<template>
    <div :class="['table-form', { 'fullscreen-handle': fullscreenHandleShow }]">
        <div
            style="float: right; margin-right: 20px; cursor: pointer"
            @click="fullscreenHandleShow = !fullscreenHandleShow"
        >
            <div
                class="gvaIcon gvaIcon-fullscreen-shrink"
                v-if="fullscreenHandleShow"
            ></div>
            <div class="gvaIcon gvaIcon-fullscreen-expand" v-else></div>
        </div>
        <div class="table-title table-title-btn">
            <!-- <el-icon style="transform: translateY(2px)">
                <Discount />
            </el-icon>
            <span style="margin-right: 20px">配件规格清单</span> -->
            <el-space>
                <el-button
                    type="primary"
                    :disabled="isEditing"
                    @click="openDialogFrameDialog('all')"
                    >新增配件</el-button
                >
                <el-button
                    type="primary"
                    :disabled="isEditing"
                    @click="openDialogFrameDialog('child')"
                    >新增子层</el-button
                >
                <el-button
                    type="primary"
                    :disabled="isEditing"
                    @click="copyCheckedDialog"
                    >复制所选</el-button
                >
                <el-button
                    type="danger"
                    :disabled="isEditing"
                    @click="delChecked"
                    >删除</el-button
                >
                <el-button
                    type="primary"
                    @click="importPartDialog"
                    :disabled="isEditing"
                    >导入子层元件数据</el-button
                >
                <!-- :disabled="isEditing || allowCopy" -->
                <el-button
                    v-if="delType == 'partSpecification1'"
                    :disabled="isEditing"
                    type="warning"
                    @click.stop="copyPartSpecification"
                    >从设计规格复制</el-button
                >
                <!-- :disabled="isEditing || allowCopy" -->
                <el-button
                    v-if="delType == 'partSpecification2'"
                    :disabled="isEditing"
                    type="warning"
                    @click.stop="copyPartSpecification"
                    >从产品规格复制</el-button
                >
                <el-button type="primary" @click="checkPartDialogFun"
                    >检查完整性</el-button
                >
                <el-button
                    type="primary"
                    :disabled="isEditing"
                    @click="changeAccessorySpecOrderTypeFun"
                    >自制旧转自制新</el-button
                >
            </el-space>
            <div>
                <el-space>
                    <el-button
                        type="primary"
                        :disabled="isEditing"
                        @click="moveToLevel1Fun"
                        >移出子层</el-button
                    >
                    <el-button
                        type="primary"
                        :disabled="isEditing"
                        v-if="sizeOrParts == 'parts'"
                        @click="moveToLevel2DialogFun"
                        >移至子层</el-button
                    >
                    <el-button
                        type="primary"
                        :disabled="isEditing"
                        v-if="sizeOrParts == 'sizeAndColor'"
                        @click="moveToLevel2DialogFun2"
                        >移至子层</el-button
                    >
                    <el-button
                        type="primary"
                        :disabled="isEditing"
                        @click="changePartType"
                        >移到配件/齋架</el-button
                    >
                </el-space>
            </div>
        </div>
        <div style="margin-bottom: 10px" class="change-item">
            <el-space>
                <el-select
                    v-model="sizeOrParts"
                    placeholder="请选择"
                    style="width: 180px"
                    @change="handlesizeOrParts"
                >
                    <el-option label="按尺码颜色" value="sizeAndColor">
                    </el-option>
                    <el-option label="按配件" value="parts"> </el-option>
                </el-select>
                <el-select
                    v-model="treeFilterOptions.selectBySku"
                    placeholder="请选择"
                    style="width: 180px"
                    v-if="sizeOrParts == 'sizeAndColor'"
                >
                    <!-- <el-option :label="'全部'" :value="'all'" key="all">
                    </el-option> -->
                    <el-option
                        v-for="item in treeFilterSkyOptions"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                    >
                    </el-option>
                </el-select>
                <template v-if="sizeOrParts == 'parts'">
                    <el-select
                        v-model="treeFilterOptions.selectByParts"
                        placeholder="请选择"
                        style="width: 180px"
                        @change="handleParts"
                    >
                        <el-option :label="'全部配件'" :value="'all'" key="all">
                        </el-option>
                        <el-option
                            v-for="(item, index) in treeFilterPartsOptions"
                            :value="item.label"
                            :key="index"
                            :label="item.label"
                            >{{ item.label }}</el-option
                        >
                    </el-select>
                    <el-select
                        v-model="treeFilterOptions.selectByNum"
                        placeholder="请选择"
                        style="width: 180px"
                    >
                        <el-option :label="'全部编号'" :value="'all'" key="all">
                        </el-option>
                        <el-option
                            v-for="(item, index) in treeFilterNumsOptions"
                            :value="item.label"
                            :key="index"
                            :label="item.label"
                            >{{ item.label }}</el-option
                        >
                    </el-select>
                    <el-button
                        type="primary"
                        @click="relevancyZhaiJiaSize"
                        :disabled="isEditing"
                    >
                        关联齋架尺码
                    </el-button>
                    <el-button
                        type="primary"
                        @click="relevancyPeiJianSize"
                        :disabled="isEditing"
                        >关联配件尺码</el-button
                    >
                    <el-button
                        type="primary"
                        @click="relevancyJiaJiaoSize"
                        :disabled="isEditing"
                        >关联加脚尺碼</el-button
                    >
                </template>
            </el-space>
        </div>
        <div class="peijianguigeqingdan">
            <table style="width: 100%" border="1" cellspacing="1">
                <thead>
                    <tr class="peijianguigeqingdan-tr">
                        <th>齋架/配件</th>
                        <th>自制/外購</th>
                        <th>元件编号</th>
                        <th>颜色</th>
                        <th>尺码</th>
                        <th>物料说明</th>
                        <th>外观规格</th>
                        <th>数量</th>
                        <th>单位</th>
                        <th>物料群组</th>
                        <th>备注</th>
                    </tr>
                </thead>
            </table>
            <div
                class="tree1 self-compoment"
                v-if="sizeOrParts == 'sizeAndColor'"
            >
                <el-tree
                    style="width: 100%"
                    :data="treeData1Copy"
                    ref="treeRef1"
                    default-expand-all
                    node-key="ida"
                    show-checkbox
                    :check-strictly="true"
                    :expand-on-click-node="false"
                    :props="{ class: customNodeClass }"
                    class="my-tree1"
                >
                    <template #default="{ node, data }">
                        <div
                            class="custom-tree-node"
                            v-if="node.level == 1 || node.level == 2"
                        >
                            <el-checkbox
                                v-if="node.level == 2"
                                :value="data.ida"
                                label=""
                                @change="(val) => seletAll1(val, data)"
                            />
                            {{ node.label }}
                            <span v-if="node.level == 2 && data.noRelatedNum">
                                {{
                                    `(${
                                        data.noRelatedNum
                                            ? data.noRelatedNum
                                            : "0"
                                    })`
                                }}
                            </span>
                        </div>
                        <div class="custom-tree-node" v-else>
                            <!-- 齋架/配件 -->
                            <span
                                class="custom-tree-node-item custom-tree-node-item-drag"
                            >
                                {{
                                    node.level == 3
                                        ? "1"
                                        : node.level == 4
                                        ? "2"
                                        : ""
                                }}
                                {{ node.label }}
                            </span>
                            <div
                                :class="{
                                    'custom-tree-node-item33': node.level == 3,
                                    'custom-tree-node-item44': node.level == 4,
                                }"
                            >
                                <!-- 自制/外購 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-1"
                                >
                                    <select
                                        v-if="node.level == 3"
                                        v-model="data.orderType"
                                        placeholder=""
                                        :disabled="isEditing"
                                        @change="orderTypeChange(data)"
                                    >
                                        <option
                                            v-for="o in orderTypeOptionsFun(
                                                data
                                            )"
                                            :key="o.value"
                                            :value="o.value"
                                        >
                                            <div class="option">
                                                {{ o.label }}
                                            </div>
                                        </option>
                                    </select>
                                    <select
                                        v-if="node.level == 4"
                                        v-model="data.orderType"
                                        placeholder=""
                                        :disabled="isEditing"
                                        @change="orderTypeChange(data)"
                                    >
                                        <option
                                            v-for="o in orderTypeOptionsFun1(
                                                data
                                            )"
                                            :key="o.value"
                                            :value="o.value"
                                        >
                                            <div class="option">
                                                {{ o.label }}
                                            </div>
                                        </option>
                                    </select>
                                </span>
                                <!-- 元件编号 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-2"
                                >
                                    <input
                                        v-model="data.componentNum"
                                        :class="[
                                            'ipt1',
                                            'new-part',
                                            { 'ipt-disabled': isEditing },
                                        ]"
                                        :readonly="true"
                                        :title="data.componentNum"
                                        v-if="
                                            data.orderType.includes('自制/新')
                                        "
                                        @dblclick.stop="componentNumFocus(data)"
                                    />
                                    <input
                                        v-model="data.componentNum"
                                        :disabled="isEditing"
                                        :title="data.componentNum"
                                        class="ipt1"
                                        v-else-if="
                                            data.orderType.includes('自制/舊')
                                        "
                                        @input="componentNumInput(data)"
                                        @blur="componentNumBlur(data)"
                                    />
                                    <input
                                        v-else
                                        v-model="data.componentNum"
                                        :disabled="isEditing"
                                        :title="data.componentNum"
                                        class="ipt1"
                                        @click.stop="componentNumFocus(data)"
                                        @input="componentNumInput(data)"
                                        @blur="componentNumBlur(data)"
                                    />
                                    <input
                                        v-model="data.colorNum"
                                        :title="data.colorNum"
                                        class="ipt2"
                                        :disabled="
                                            (data.orderType.includes('外購') &&
                                                node.label != '銅芯') ||
                                            isEditing
                                        "
                                        @blur="
                                            getArfcGetMaterialFun(data, 'last')
                                        "
                                    />
                                    <span v-if="data.err" class="err-note">{{
                                        data.err
                                    }}</span>
                                </span>
                                <!-- 尺码 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-3"
                                >
                                    <input
                                        v-model="data.sizeNum"
                                        :title="data.sizeNum"
                                        :disabled="
                                            node.label != '銅芯' || isEditing
                                        "
                                        @input="sizeNumInput(data)"
                                        @change="changePartsValue(data)"
                                    />
                                </span>
                                <!-- SAP物料说明 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-4"
                                >
                                    <span
                                        class="ipt1"
                                        v-if="data.orderType.includes('自制')"
                                        @click="searchPartsMain(data)"
                                        >查询</span
                                    >
                                    <span
                                        class="ipt1"
                                        style="color: #ccc"
                                        v-else-if="
                                            data.orderType.includes('外購')
                                        "
                                        >sap</span
                                    >
                                    <span class="ipt1" v-else></span>
                                    <input
                                        v-model="data.sapDesc"
                                        :title="data.sapDesc"
                                        class="ipt2"
                                        :disabled="
                                            (data.orderType.includes('自制') &&
                                                data.isNew != '1' &&
                                                data.editSapDesc != '1') ||
                                            isEditing ||
                                            data.orderType.includes('外購')
                                        "
                                        @change="changePartsValue(data)"
                                    />
                                </span>
                                <!-- 外观规格 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-5"
                                >
                                    <input
                                        v-model="data.appearanceSpec"
                                        :title="data.appearanceSpec"
                                        :disabled="isEditing"
                                        @change="changePartsValue(data)"
                                    />
                                </span>
                                <!-- 数量 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-6"
                                >
                                    <input
                                        v-model="data.num"
                                        :disabled="isEditing"
                                        :title="data.num"
                                        @input="numBlurCheck(data)"
                                        @change="changePartsValue(data)"
                                    />
                                    <span v-if="data.errNum" class="err-note">{{
                                        data.errNum
                                    }}</span>
                                </span>
                                <!-- 单位 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-7"
                                >
                                    <select
                                        v-model="data.unit"
                                        placeholder=""
                                        clearable
                                        :disabled="
                                            (data.orderType.includes('自制') &&
                                                data.editUnit != '1') ||
                                            isEditing ||
                                            (data.orderType.includes(
                                                '外購/舊'
                                            ) &&
                                                !!data.sapDesc)
                                        "
                                        @change="changePartsValue(data)"
                                    >
                                        <option
                                            v-for="item in props.dictOptions
                                                .unit"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                            {{ item.label }}
                                        </option>
                                    </select>
                                </span>
                                <!-- 物料群组说明/编号 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-8"
                                >
                                    <input
                                        v-model="data.groupDesc"
                                        :title="data.groupDesc"
                                        :disabled="
                                            (data.orderType.includes(
                                                '自制/新'
                                            ) &&
                                                data.editGroupDesc != '1') ||
                                            (data.orderType.includes('舊') &&
                                                data.editGroupDesc != '1') ||
                                            isEditing
                                        "
                                        @change="changePartsValue(data)"
                                    />
                                </span>
                                <!-- 备注 -->
                                <span
                                    class="custom-tree-node-item custom-tree-node-item-9"
                                >
                                    <input
                                        v-model="data.note"
                                        :title="data.note"
                                        class="ipt1"
                                        @change="changePartsValue(data)"
                                        :disabled="isEditing"
                                    />
                                    <span
                                        v-if="data.orderType.includes('自制')"
                                        class="ipt2"
                                        @click="getBomList(data)"
                                        >Bom</span
                                    >
                                </span>
                            </div>
                        </div>
                    </template>
                </el-tree>
            </div>
            <!-- <div>第二棵树</div> -->
            <div class="tree2 my-tree2 self-compoment" v-else>
                <div v-for="(treeData2CopyItem, i) in treeData2Copy">
                    <div class="custom-tree-node is-title1" v-if="i == 0">
                        <el-icon
                            @click="tree2levelHandle('leve1show', false)"
                            v-if="tree2levelShow.leve1show"
                            ><CaretBottom
                        /></el-icon>
                        <el-icon
                            @click="tree2levelHandle('leve1show', true)"
                            v-else
                            ><CaretRight
                        /></el-icon>
                        <el-checkbox
                            :value="treeData2CopyItem.ida"
                            label=""
                            @change="(val) => seletAll2(val, treeData2CopyItem)"
                        />
                        齋架
                    </div>
                    <div class="custom-tree-node is-title1" v-else>
                        <el-icon
                            @click="tree2levelHandle('leve2show', false)"
                            v-if="tree2levelShow.leve2show"
                            ><CaretBottom
                        /></el-icon>
                        <el-icon
                            @click="tree2levelHandle('leve2show', true)"
                            v-else
                            ><CaretRight
                        /></el-icon>
                        <el-checkbox
                            :value="treeData2CopyItem.ida"
                            label=""
                            @change="(val) => seletAll2(val, treeData2CopyItem)"
                        />
                        配件
                    </div>
                    <div v-show="treeData2CopyItem.show">
                        <div
                            v-for="data in treeData2CopyItem.children"
                            :key="data.ida"
                            class="part-row"
                        >
                            <div class="color-check">
                                <span
                                    style="
                                        margin: 0 15px 0 40px;
                                        min-height: 24px;
                                    "
                                    class="size-list-check"
                                    v-if="sizeData"
                                >
                                    <div>
                                        <el-checkbox-group
                                            v-model="data.sizeListCheck"
                                            :disabled="isEditing"
                                        >
                                            <div
                                                v-for="item in sizeData"
                                                :key="item"
                                            >
                                                <el-checkbox
                                                    :label="item"
                                                    :value="item"
                                                />
                                            </div>
                                        </el-checkbox-group>
                                    </div>
                                    <div style="margin-left: 10px">
                                        <el-checkbox-group
                                            v-model="data.includedAngleList"
                                            :disabled="isEditing"
                                        >
                                            <div
                                                v-for="item in includedAngleListCopy"
                                                :key="item"
                                            >
                                                <el-checkbox :value="item">
                                                    {{ item }}
                                                </el-checkbox>
                                            </div>
                                        </el-checkbox-group>
                                    </div>
                                </span>
                                <span
                                    style="margin-right: 10px"
                                    v-if="
                                        (props.frameMaterials == '膠架' ||
                                            props.frameMaterials == '胶架' ||
                                            props.frameMaterials == '啤架') &&
                                        treeData2CopyItem.label == '配件' &&
                                        data.orderType.includes('自制')
                                    "
                                >
                                    <el-checkbox
                                        v-model="data.is_na"
                                        :false-label="0"
                                        :true-label="1"
                                        :disabled="isEditing"
                                        @change="
                                            (val) => {
                                                NAchange(val, data);
                                            }
                                        "
                                    >
                                        <span style="color: red">N/A</span>
                                    </el-checkbox>
                                </span>
                                <span
                                    style="margin-right: 10px; width: 45px"
                                    v-else
                                ></span>
                                <span
                                    v-if="
                                        colorDataCopy.length > 0 &&
                                        treeData2CopyItem.label == '配件'
                                    "
                                    style="margin-left: 10px"
                                    class="color-list-check"
                                >
                                    <el-checkbox
                                        v-model="data.colorAll"
                                        :disabled="isEditing"
                                        @change="
                                            (val) => {
                                                colorCheckAll(val, data);
                                            }
                                        "
                                    >
                                        <span style="margin-right: 10px"
                                            >全选</span
                                        >
                                    </el-checkbox>
                                    <el-checkbox-group
                                        v-model="data.colorListCheck"
                                        :disabled="isEditing"
                                    >
                                        <el-checkbox
                                            v-for="item in colorDataCopy"
                                            :label="item"
                                            :value="item"
                                            :key="item"
                                        />
                                    </el-checkbox-group>
                                </span>
                            </div>
                            <div class="custom-tree-node" :key="`${data.ida}_n`">
                                <span class="custom-tree-node-item99" :key="`${data.ida}_p`">
                                    <el-checkbox
                                        style="
                                            padding-left: 16px;
                                            padding-right: 5px;
                                        "
                                        v-model="data.checked"
                                        :key="data.ida"
                                    />
                                    1{{ data.label }}
                                </span>
                                <div class="custom-tree-node-item33">
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-1"
                                    >
                                        <select
                                            v-model="data.orderType"
                                            placeholder=""
                                            :disabled="isEditing"
                                            @change="orderTypeChange(data)"
                                        >
                                            <option
                                                v-for="o in orderTypeOptionsFun(
                                                    data
                                                )"
                                                :key="o.value"
                                                :value="o.value"
                                            >
                                                {{ o.label }}
                                            </option>
                                        </select>
                                    </span>
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-2"
                                    >
                                        <input
                                            v-model="data.componentNum"
                                            :class="[
                                                'ipt1',
                                                'new-part',
                                                { 'ipt-disabled': isEditing },
                                            ]"
                                            :readonly="true"
                                            :title="data.componentNum"
                                            v-if="
                                                data.orderType.includes(
                                                    '自制/新'
                                                )
                                            "
                                            @dblclick.stop="
                                                componentNumFocus(data)
                                            "
                                        />
                                        <input
                                            v-model="data.componentNum"
                                            :disabled="isEditing"
                                            :title="data.componentNum"
                                            class="ipt1"
                                            v-else-if="
                                                data.orderType.includes(
                                                    '自制/舊'
                                                )
                                            "
                                            @input="componentNumInput(data)"
                                            @blur="componentNumBlur(data)"
                                        />
                                        <input
                                            v-else
                                            v-model="data.componentNum"
                                            :disabled="isEditing"
                                            :title="data.componentNum"
                                            class="ipt1"
                                            @click.stop="
                                                componentNumFocus(data)
                                            "
                                            @input="componentNumInput(data)"
                                            @blur="componentNumBlur(data)"
                                        />
                                        <input
                                            v-model="data.colorNum"
                                            :title="data.colorNum"
                                            class="ipt2"
                                            :disabled="
                                                (data.orderType.includes(
                                                    '外購'
                                                ) &&
                                                    data.label != '銅芯') ||
                                                isEditing
                                            "
                                            @blur="
                                                getArfcGetMaterialFun(
                                                    data,
                                                    'last'
                                                )
                                            "
                                        />
                                        <span
                                            v-if="data.err"
                                            class="err-note"
                                            >{{ data.err }}</span
                                        >
                                    </span>
                                    <!-- 尺码 -->
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-3"
                                    >
                                        <input
                                            v-model="data.sizeNum"
                                            :title="data.sizeNum"
                                            :disabled="
                                                data.label != '銅芯' ||
                                                isEditing
                                            "
                                            @input="sizeNumInput(data)"
                                        />
                                    </span>
                                    <!-- SAP物料说明 -->
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-4"
                                    >
                                        <span
                                            class="ipt1"
                                            v-if="
                                                data.orderType.includes('自制')
                                            "
                                            @click="searchPartsMain(data)"
                                            >查询</span
                                        >
                                        <span
                                            class="ipt1"
                                            style="color: #ccc"
                                            v-else-if="
                                                data.orderType.includes('外購')
                                            "
                                            >sap</span
                                        >
                                        <span class="ipt1" v-else></span>
                                        <input
                                            v-model="data.sapDesc"
                                            :title="data.sapDesc"
                                            class="ipt2"
                                            :disabled="
                                                (data.orderType.includes(
                                                    '自制'
                                                ) &&
                                                    data.isNew != '1' &&
                                                    data.editSapDesc != '1') ||
                                                isEditing ||
                                                data.orderType.includes('外購')
                                            "
                                        />
                                    </span>
                                    <!-- 外观规格 -->
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-5"
                                    >
                                        <input
                                            v-model="data.appearanceSpec"
                                            :title="data.appearanceSpec"
                                            :disabled="isEditing"
                                        />
                                    </span>
                                    <!-- 数量 -->
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-6"
                                    >
                                        <input
                                            v-model="data.num"
                                            :disabled="isEditing"
                                            :title="data.num"
                                            @input="numBlurCheck(data)"
                                        />
                                        <span
                                            v-if="data.errNum"
                                            class="err-note"
                                            >{{ data.errNum }}</span
                                        >
                                    </span>
                                    <!-- 单位 -->
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-7"
                                    >
                                        <select
                                            v-model="data.unit"
                                            placeholder=""
                                            clearable
                                            :disabled="
                                                (data.orderType.includes(
                                                    '自制'
                                                ) &&
                                                    data.editUnit != '1') ||
                                                isEditing ||
                                                (data.orderType.includes(
                                                    '外購/舊'
                                                ) &&
                                                    !!data.sapDesc)
                                            "
                                        >
                                            <option
                                                v-for="item in props.dictOptions
                                                    .unit"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            >
                                                {{ item.label }}
                                            </option>
                                        </select>
                                    </span>
                                    <!-- 物料群组说明/编号 -->
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-8"
                                    >
                                        <input
                                            v-model="data.groupDesc"
                                            :title="data.groupDesc"
                                            :disabled="
                                                (data.orderType.includes(
                                                    '舊'
                                                ) &&
                                                    data.editGroupDesc !=
                                                        '1') ||
                                                isEditing
                                            "
                                        />
                                    </span>
                                    <!-- 备注 -->
                                    <span
                                        class="custom-tree-node-item custom-tree-node-item-9"
                                    >
                                        <input
                                            v-model="data.note"
                                            :title="data.note"
                                            class="ipt1"
                                            :disabled="isEditing"
                                        />
                                        <span
                                            v-if="
                                                data.orderType.includes('自制')
                                            "
                                            @click="getBomList(data)"
                                            class="ipt2"
                                            >Bom</span
                                        >
                                    </span>
                                </div>
                            </div>
                            <template
                                v-if="data.children && data.children.length > 0"
                            >
                                <div
                                    class="custom-tree-node custom-tree-node-item44"
                                    v-for="data2 in data.children"
                                    style="width: 100%"
                                >
                                    <span class="custom-tree-node-item99">
                                        <el-checkbox
                                            style="
                                                padding-left: 16px;
                                                padding-right: 5px;
                                            "
                                            v-model="data2.checked"
                                            :key="data2.ida"
                                        />
                                        <span style="padding-left: 15px"
                                            >2{{ data2.label }}</span
                                        >
                                    </span>
                                    <div
                                        class="custom-tree-node-item33 custom-tree-node-item33-2"
                                    >
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-1"
                                        >
                                            <select
                                                v-model="data2.orderType"
                                                placeholder=""
                                                :disabled="isEditing"
                                                @change="orderTypeChange(data2)"
                                            >
                                                <option
                                                    v-for="o in orderTypeOptionsFun1(
                                                        data2
                                                    )"
                                                    :key="o.value"
                                                    :value="o.value"
                                                >
                                                    <div class="option">
                                                        {{ o.label }}
                                                    </div>
                                                </option>
                                            </select>
                                        </span>
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-2"
                                        >
                                            <input
                                                v-model="data2.componentNum"
                                                :disabled="isEditing"
                                                :title="data2.componentNum"
                                                class="ipt1"
                                                v-if="
                                                    data2.orderType.includes(
                                                        '自制/舊'
                                                    )
                                                "
                                                @input="
                                                    componentNumInput(data2)
                                                "
                                                @blur="componentNumBlur(data2)"
                                            />
                                            <input
                                                v-else
                                                v-model="data2.componentNum"
                                                :disabled="isEditing"
                                                :title="data2.componentNum"
                                                class="ipt1"
                                                @click.stop="
                                                    componentNumFocus(data2)
                                                "
                                                @input="
                                                    componentNumInput(data2)
                                                "
                                                @blur="componentNumBlur(data2)"
                                            />
                                            <input
                                                v-model="data2.colorNum"
                                                :title="data2.colorNum"
                                                class="ipt2"
                                                :disabled="
                                                    (data2.orderType.includes(
                                                        '外購'
                                                    ) &&
                                                        data2.label !=
                                                            '銅芯') ||
                                                    isEditing
                                                "
                                                @blur="
                                                    getArfcGetMaterialFun(
                                                        data2,
                                                        'last'
                                                    )
                                                "
                                            />
                                            <span
                                                v-if="data2.err"
                                                class="err-note"
                                                >{{ data2.err }}</span
                                            >
                                        </span>
                                        <!-- 尺码 -->
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-3"
                                        >
                                            <input
                                                v-model="data2.sizeNum"
                                                :title="data2.sizeNum"
                                                :disabled="
                                                    data.label != '銅芯' ||
                                                    isEditing
                                                "
                                                @input="sizeNumInput(data2)"
                                            />
                                        </span>
                                        <!-- SAP物料说明 -->
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-4"
                                        >
                                            <span
                                                class="ipt1"
                                                v-if="
                                                    data2.orderType.includes(
                                                        '自制'
                                                    )
                                                "
                                                @click="searchPartsMain(data2)"
                                                >查询</span
                                            >
                                            <span
                                                class="ipt1"
                                                style="color: #ccc"
                                                v-else-if="
                                                    data2.orderType.includes(
                                                        '外購'
                                                    )
                                                "
                                                >sap</span
                                            >
                                            <span class="ipt1" v-else></span>
                                            <input
                                                v-model="data2.sapDesc"
                                                :title="data2.sapDesc"
                                                class="ipt2"
                                                :disabled="
                                                    (data2.orderType.includes(
                                                        '自制'
                                                    ) &&
                                                        data2.isNew != '1' &&
                                                        data2.editSapDesc !=
                                                            '1') ||
                                                    isEditing ||
                                                    data2.orderType.includes(
                                                        '外購'
                                                    )
                                                "
                                            />
                                        </span>
                                        <!-- 外观规格 -->
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-5"
                                        >
                                            <input
                                                v-model="data2.appearanceSpec"
                                                :title="data2.appearanceSpec"
                                                :disabled="isEditing"
                                            />
                                        </span>
                                        <!-- 数量 -->
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-6"
                                        >
                                            <input
                                                v-model="data2.num"
                                                :disabled="isEditing"
                                                :title="data2.num"
                                                @input="numBlurCheck(data2)"
                                            />
                                            <span
                                                v-if="data2.errNum"
                                                class="err-note"
                                                >{{ data2.errNum }}</span
                                            >
                                        </span>
                                        <!-- 单位 -->
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-7"
                                        >
                                            <select
                                                v-model="data2.unit"
                                                placeholder=""
                                                clearable
                                                :disabled="
                                                    (data2.orderType.includes(
                                                        '自制'
                                                    ) &&
                                                        data2.editUnit != '1') ||
                                                    isEditing ||
                                                    (data2.orderType.includes(
                                                        '外購/舊'
                                                    ) &&
                                                        !!data2.sapDesc)
                                                "
                                            >
                                                <option
                                                    v-for="item in props
                                                        .dictOptions.unit"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                >
                                                    {{ item.label }}
                                                </option>
                                            </select>
                                        </span>
                                        <!-- 物料群组说明/编号 -->
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-8"
                                        >
                                            <input
                                                v-model="data2.groupDesc"
                                                :title="data2.groupDesc"
                                                :disabled="
                                                    (data2.orderType.includes(
                                                        '舊'
                                                    ) &&
                                                        data2.editGroupDesc !=
                                                            '1') ||
                                                    isEditing
                                                "
                                            />
                                        </span>
                                        <!-- 备注 -->
                                        <span
                                            class="custom-tree-node-item custom-tree-node-item-9"
                                        >
                                            <input
                                                v-model="data2.note"
                                                :title="data2.note"
                                                class="ipt1"
                                                :disabled="isEditing"
                                            />
                                            <span
                                                v-if="
                                                    data2.orderType.includes(
                                                        '自制'
                                                    )
                                                "
                                                @click="getBomList(data2)"
                                                class="ipt2"
                                                >Bom</span
                                            >
                                        </span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增 齋架/配件 -->
        <el-dialog
            v-model="openDialogFrameShow"
            destroy-on-close
            title="新增 齋架/配件"
            width="1000px"
            :top="'30px'"
            class="peijian-el"
        >
            <el-checkbox-group
                v-model="frameListChecked"
                class="peijian-el-checkbox-group"
            >
                <div
                    v-for="item in frameList"
                    :key="item.value"
                    class="peijian-item"
                >
                    <el-input-number
                        style="width: 48px; height: 23px"
                        v-model="item.num"
                        :min="1"
                    />
                    <el-checkbox
                        style="height: 23px"
                        :label="item.text"
                        :value="item.value"
                    >
                        {{ item.text }}
                    </el-checkbox>
                </div>
            </el-checkbox-group>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="openDialogFrameShow = false">
                        关闭
                    </el-button>
                    <template v-if="openDialogFrameShowChild">
                        <el-button
                            type="primary"
                            @click="addFrameAndPartsChild()"
                        >
                            确定
                        </el-button>
                    </template>
                    <template v-else>
                        <el-button
                            type="primary"
                            @click="addFrameAndParts('frame')"
                        >
                            保存为齋架
                        </el-button>
                        <el-button
                            type="primary"
                            @click="addFrameAndParts('parts')"
                        >
                            保存为配件
                        </el-button>
                    </template>
                </div>
            </template>
        </el-dialog>
        <!-- 复制所选 -->
        <el-dialog
            v-model="copyCheckedShow"
            destroy-on-close
            title="复制所选配件"
            width="350"
        >
            <el-form
                :model="copyCheckedParams"
                ref="elFormRef1"
                label-position="right"
                label-width="80px"
                class="copy-checked"
            >
                <el-form-item label="复制个数:" prop="num">
                    <el-input-number
                        v-model="copyCheckedParams.num"
                        :min="1"
                        :max="20"
                    />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="copyChecked">
                        确定
                    </el-button>
                    <el-button @click="copyCheckedShow = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 自制新配件编号配置 -->
        <el-dialog
            v-model="componentNumSetNewShow"
            destroy-on-close
            title="自制新配件编号配置"
            width="800"
        >
            <el-form
                :model="componentNumFrom"
                ref="elFormRef1"
                label-position="right"
                label-width="120px"
                class="copy-checked"
            >
                <el-form-item label="共用主模编号:" prop="num">
                    <el-input
                        v-model="componentNumFrom.num"
                        :disabled="props.isEditing"
                        placeholder="请输入主模编号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="材质:" prop="material">
                    <el-tree-select
                        v-model="componentNumFrom.material"
                        :data="materialOptions"
                        :disabled="props.isEditing"
                        filterable
                        clearable
                        @change="materialOptionsChange"
                    />
                </el-form-item>
                <el-form-item label="工序:" prop="workingProcedure">
                    <el-select
                        placeholder="请选择"
                        v-model="componentNumFrom.workingProcedure"
                        clearable
                        :disabled="props.isEditing"
                        @change="workingProcedureChange"
                    >
                        <el-option
                            v-for="item in workingProcedureOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="componentNumSetNewShow = false">
                        关闭
                    </el-button>
                    <el-button
                        type="primary"
                        :loading="componentNumSaveLoading"
                        @click="componentNumSave"
                        :disabled="props.isEditing"
                    >
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 导入子元件数据 -->
        <el-dialog
            v-model="importPartDialogShow"
            destroy-on-close
            title="导入配件"
            width="800"
        >
            <div
                style="display: flex; align-items: center; margin-bottom: 10px"
            >
                <span>要导入的配件编号：</span>
                <el-input
                    v-model="importPartNumBom"
                    style="width: 200px; margin: 0 10px"
                />
                <el-button type="primary" @click="importPartNumBomSearch"
                    >查询</el-button
                >
            </div>
            <div>BOM中包含的子层配件列表：</div>
            <div class="import-part">
                <el-table
                    :data="importPartData"
                    ref="multipleTableRef"
                    style="width: 100%"
                    border
                >
                    <!-- <el-table-column type="selection" width="55" /> -->
                    <el-table-column prop="WGBEZ" label="配件名称" />
                    <el-table-column prop="COMPONENT" label="配件编号">
                    </el-table-column>
                </el-table>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="importSelectPart">
                        确定
                    </el-button>
                    <el-button @click="importPartDialogShow = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 配件树- 查询 按钮 - 弹窗 -->
        <el-dialog
            v-model="searchPartsMainShow"
            destroy-on-close
            title="配件编号主档返回信息"
            modal-class="draggable-dialog-box"
            width="1000"
            draggable
        >
            <div class="import-part">
                <el-table
                    :data="searchPartsList"
                    ref="searchPartsListRef"
                    style="width: 100%"
                    max-height="calc(100vh - 200px)"
                    border
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    @row-dblclick="rowDblclick"
                >
                    <el-table-column prop="accessoryNum" label="元件编号">
                        <template #default="{ row }">
                            {{ row.accessoryNum }}{{ row.colorNum }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="materialGroup" label="物料群组">
                    </el-table-column>
                    <el-table-column
                        prop="materialGroupDesc"
                        label="物料群组说明"
                    >
                    </el-table-column>
                    <el-table-column prop="materialDesc" label="物料说明">
                    </el-table-column>
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                    <el-table-column prop="num" label="sap"> </el-table-column>
                </el-table>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        type="primary"
                        :disabled="props.isEditing"
                        @click="confirmSelectPart"
                    >
                        确定
                    </el-button>
                    <el-button @click="searchPartsMainShow = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 配件树- bom 按钮 - 弹窗 -->
        <el-dialog
            v-model="bomListShow"
            destroy-on-close
            title="bom"
            modal-class="draggable-dialog-box"
            max-height="calc(100vh - 200px)"
            width="1000"
            draggable
            class="bom-dialog"
        >
            <div class="bom-dialog-title">
                元件编号：{{ bomPartlevel1.componentNum
                }}{{ bomPartlevel1.colorNum }}
            </div>
            <div class="import-part">
                <el-table
                    :data="bomList"
                    ref="bomListRef"
                    style="width: 100%"
                    border
                >
                    <el-table-column prop="WGBEZ" label="配件名称" />
                    <el-table-column prop="COMPONENT" label="物料编号">
                    </el-table-column>
                    <el-table-column prop="MAT_GROUP" label="物料群组">
                    </el-table-column>
                    <el-table-column prop="COMP_QTY" label="数量">
                        <!-- <template #default="{ row }">
                            {{
                                row.COMP_QTY
                                    ? row.COMP_QTY.replace(",", "") / 1000
                                    : ""
                            }}
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="COMP_UNIT" label="单位">
                    </el-table-column>
                    <el-table-column prop="MAKTX" label="物料描述">
                    </el-table-column>
                    <el-table-column prop="SORTSTRING" label="排序字串">
                    </el-table-column>
                </el-table>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="bomListShow = false"> 关闭 </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 移动到目标配件 -->
        <el-dialog
            v-model="targetPartDialog"
            destroy-on-close
            title="移动到目标配件"
            width="900"
        >
            <div class="move-part">
                <table style="width: 100%" border="1" cellspacing="1">
                    <thead>
                        <tr class="targetPartDialog-tr">
                            <th></th>
                            <th>齋架/配件</th>
                            <th>自制/外購</th>
                            <th>元件编号</th>
                            <th>外观规格</th>
                            <th>数量</th>
                            <th>单位</th>
                        </tr>
                    </thead>
                </table>
                <div class="move-part-title">齋架</div>
                <el-table
                    :data="targetPartList1"
                    ref="targetPartList1Ref"
                    style="width: 100%"
                    border
                    highlight-current-row
                    :show-header="false"
                    row-key="ida"
                    @selection-change="targetPartListChange1"
                    @select="targetPartListChange1Select"
                    :tree-props="{ children: 'children', hasChildren: false }"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="label" label="名称">
                    </el-table-column>
                    <el-table-column prop="orderType" label="自制/外購">
                    </el-table-column>
                    <el-table-column prop="componentNum" label="元件编号">
                        <template #default="{ row }">
                            {{ row.componentNum }}{{ row.colorNum }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="appearanceSpec" label="外观规格">
                    </el-table-column>
                    <el-table-column prop="num" label="数量"> </el-table-column>
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                </el-table>
                <div class="move-part-title">配件</div>
                <el-table
                    :data="targetPartList2"
                    ref="targetPartList2Ref"
                    style="width: 100%"
                    border
                    highlight-current-row
                    :show-header="false"
                    row-key="ida"
                    @selection-change="targetPartListChange2"
                    @select="targetPartListChange2Select"
                    :tree-props="{ children: 'children', hasChildren: false }"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="label" label="名称">
                    </el-table-column>
                    <el-table-column prop="orderType" label="自制/外購">
                    </el-table-column>
                    <el-table-column prop="componentNum" label="元件编号">
                        <template #default="{ row }">
                            {{ row.componentNum }}{{ row.colorNum }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="appearanceSpec" label="外观规格">
                    </el-table-column>
                    <el-table-column prop="num" label="数量"> </el-table-column>
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                </el-table>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        type="primary"
                        :loading="moveToLevel2Loading"
                        @click="moveToLevel2DialogFunConfirm"
                    >
                        确定
                    </el-button>
                    <el-button @click="targetPartDialog = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 检查配件完整性 -->
        <el-dialog
            v-model="checkPartDialogShow"
            destroy-on-close
            title="检查配件完整性"
            width="90%"
            :top="'5vh'"
        >
            <div class="import-part">
                <el-table
                    :data="treeData1"
                    highlight-current-row
                    row-key="ida"
                    default-expand-all
                    :tree-props="{ children: 'children', hasChildren: false }"
                    :max-height="'80vh'"
                    border
                >
                    <el-table-column
                        prop="label"
                        width="190px"
                        label="齋架/配件"
                    >
                        <template #default="{ row }">
                            {{ row.level }}{{ row.label }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="orderType"
                        width="80px"
                        label="自制/外購"
                    />
                    <el-table-column
                        prop="componentNum"
                        width="160px"
                        label="元件编号"
                    />
                    <el-table-column
                        prop="colorNum"
                        width="100px"
                        label="颜色"
                    />
                    <el-table-column prop="sizeNum" width="90px" label="尺码" />
                    <el-table-column prop="sapDesc" label="物料说明" />
                    <el-table-column prop="appearanceSpec" label="外观规格" />
                    <el-table-column prop="num" width="80px" label="数量" />
                    <el-table-column prop="unit" width="60px" label="单位" />
                    <el-table-column prop="groupDesc" label="物料群组" />
                    <el-table-column prop="note" label="备注" />
                </el-table>
            </div>
            <!-- <template #footer>
                <div class="dialog-footer">
                    <el-button @click="checkPartDialogShow = false">
                        关闭
                    </el-button>
                </div>
            </template> -->
        </el-dialog>
    </div>
</template>

<script setup>
import {
    reactive,
    toRefs,
    watch,
    ref,
    defineProps,
    computed,
    onMounted,
    defineEmits,
    nextTick,
} from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { deepClone2, debounce } from "@/utils/tool.js";
import { useDict } from "@/utils/dictionary.js";
import { emitter } from "@/utils/bus.js";
import { frameList1 } from "./data.js";
import {
    changePartsToSkuFun,
    changeSkuToPartsFun,
} from "@/view/plmProductSpec/components/commonFun.js";
import { getMaterialCategoryDocumentList } from "@/api/confMaterialCategoryDocument";
import {
    getAccessoryNumberDocumentList,
    getAccessoryNumberDocumentListOnlyAccessoryNum,
} from "@/api/confAccessoryNumberDocument";
import {
    getNewAccessoryNumByMaterialWorkship,
    getSelfMadeNewNum,
    getArfcGetMaterial,
    getZrfcMatBomRead,
    findAccessoryNumberDocument,
    getAccessoryNumberDocumentNotLike,
    changeAccessorySpecOrderType,
} from "@/api/plmProductSpec";
import { getAccessoryNumberSettingList } from "@/api/confAccessoryNumberSetting";
// import { getSelfmadeOutsourceSettingList } from "@/api/confSelfmadeOutsourceSetting";
import { getSysDictionaryDetailList } from "@/api/sysDictionaryDetail"; // 获取字典
import { useRoute, useRouter } from "vue-router";

const router = new useRouter();
const route = new useRoute();

defineOptions({
    name: "partSpecification",
});

const props = defineProps({
    sizeData: {
        type: Array,
        default: [],
    },
    colorData: {
        type: Array,
        default: [],
    },
    delType: {
        type: String,
        default: "",
    },
    isEditing: { type: Boolean, default: false },
    dictOptions: { type: Object, defaul: {} },
    frameMaterials: {
        type: String,
        default: "",
    },
    frameList2: {
        type: Array,
        default: [],
    },
});
const emit = defineEmits([
    "getSelfPartsFun",
    "getTreeData",
    "copyPartSpecification",
]);

let robot = ref(null);

let fullscreenHandleShow = ref(false);

const sizeData = computed(() => {
    return props.sizeData
        .map((item) => {
            return item.sizeNum;
        })
        .filter((res) => {
            return !!res;
        });
});
const includedAngleListCopy = computed(() => {
    let list = [];
    props.sizeData.forEach((item) => {
        if (item.sizeNum) {
            let index = list.findIndex((val) => {
                return val == item.sizeNum.split("-")[2];
            });
            if (index == -1) list.push(item.sizeNum.split("-")[2]);
        }
    });
    return list;
});
const colorDataCopy = computed(() => {
    return props.colorData
        .map((item) => {
            return item.colorNum;
        })
        .filter((res) => {
            return !!res;
        });
});

// 已汇入sapsky
const sapImportedSkuList = ref([]);

// 按颜色尺码或者按配件
const sizeOrParts = ref("sizeAndColor"); // 颜色尺码:sizeOrParts，配件:parts
const treeFilterOptions = ref({
    selectBySku: "未关联尺码颜色",
    selectByParts: "all",
    selectByNum: "all",
});
// 筛选项：按颜色尺码
const treeFilterSkyOptions = computed(() => {
    let list = treeData1.value.map((item) => {
        return { label: item.label, value: item.label };
    });
    list.sort((a, b) => {
        return a.value.localeCompare(b.value);
    });
    list.forEach((sku) => {
        if (
            sapImportedSkuList.value &&
            sapImportedSkuList.value.includes(sku.label)
        ) {
            sku.label = sku.label + "(已汇入SAP)";
        }
    });
    return list;
});
// 筛选项：按配件
const treeFilterPartsOptions = computed(() => {
    let list = [];
    treeData2.value[0].children.forEach((item, i) => {
        let index = list.findIndex((val) => {
            return val.label == item.label;
        });
        if (index == -1) {
            list.push({
                label: item.label,
                value: item.label,
                // value: item.ida,
            });
        }
    });
    treeData2.value[1].children.forEach((item, i) => {
        let index = list.findIndex((val) => {
            return val.label == item.label;
        });
        if (index == -1) {
            list.push({
                label: item.label,
                value: item.label,
                // value: item.ida,
            });
        }
    });
    return list;
});
// 筛选项：按原件编号
const treeFilterNumsOptions = computed(() => {
    let list = [];
    treeData2.value[0].children
        .filter((res) => {
            if (treeFilterOptions.value.selectByParts == "all") return true;
            return res.label == treeFilterOptions.value.selectByParts;
        })
        .forEach((item, i) => {
            let index = list.findIndex((val) => {
                return val.label == item.componentNum;
            });
            if (item.componentNum && index == -1) {
                list.push({
                    label: item.componentNum,
                    value: item.ida,
                });
            }
        });
    treeData2.value[1].children
        .filter((res) => {
            if (treeFilterOptions.value.selectByParts == "all") return true;
            return res.label == treeFilterOptions.value.selectByParts;
        })
        .forEach((item, i) => {
            let index = list.findIndex((val) => {
                return val.label == item.componentNum;
            });
            if (item.componentNum && index == -1) {
                list.push({
                    label: item.componentNum,
                    value: item.ida,
                });
            }
        });
    return list;
});
// 树data
const treeData1Copy = computed(() => {
    let list = [];
    let list1 = treeData1.value.filter((item) => {
        if (item.label == "未关联尺码颜色") {
            item.children[0].noRelatedNum = item.children[0].children.length;
            item.children[1].noRelatedNum = item.children[1].children.length;
            return true;
        }
        return item.label == treeFilterOptions.value.selectBySku;
    });
    let list2 = treeData1.value.filter((item) => {
        return (
            item.label == treeFilterOptions.value.selectBySku &&
            treeFilterOptions.value.selectBySku != "未关联尺码颜色"
        );
    });
    if (list2.length == 0) {
        list = deepClone2(list1);
        // return list;
    } else {
        list1 = deepClone2(list1);
        list2 = deepClone2(list2);
        list2[0].children[0].children = list2[0].children[0].children.concat(
            list1[0].children[0].children
        );
        list2[0].children[1].children = list2[0].children[1].children.concat(
            list1[0].children[1].children
        );
        list = list2;
    }
    list[0].children[0].children.sort((a, b) => {
        return a.listOrder - b.listOrder;
    });
    list[0].children[1].children.sort((a, b) => {
        return a.listOrder - b.listOrder;
    });
    // console.log("list=======>",list)
    return list;
});
const treeData2Copy = computed(() => {
    let list1 = [];
    let list2 = [];
    list1 = treeData2.value[0].children;
    list2 = treeData2.value[1].children;
    let Parts = treeFilterOptions.value.selectByParts;
    let Num = treeFilterOptions.value.selectByNum;
    if (Parts == "all" && Num == "all") {
        list1 = treeData2.value[0].children;
        list2 = treeData2.value[1].children;
    } else if (Parts != "all" && Num == "all") {
        list1 = treeData2.value[0].children.filter((item) => {
            return item.label == Parts;
        });
        list2 = treeData2.value[1].children.filter((item) => {
            return item.label == Parts;
        });
    } else if (Parts == "all" && Num != "all") {
        list1 = treeData2.value[0].children.filter((item) => {
            return item.componentNum == Num;
        });
        list2 = treeData2.value[1].children.filter((item) => {
            return item.componentNum == Num;
        });
    } else {
        list1 = treeData2.value[0].children.filter((item) => {
            return item.label == Parts && item.componentNum == Num;
        });
        list2 = treeData2.value[1].children.filter((item) => {
            return item.label == Parts && item.componentNum == Num;
        });
    }
    list2.forEach((res) => {
        res["colorAll"] = false;
        if (res.colorListCheck.length == colorDataCopy.value.length) {
            res["colorAll"] = true;
        }
    });
    return [
        {
            label: "齋架",
            cate: "title1",
            show: tree2levelShow.value.leve1show,
            children: list1,
        },
        {
            label: "配件",
            cate: "title1",
            show: tree2levelShow.value.leve2show,
            children: list2,
        },
    ];
});

const allowCopy = computed(() => {
    if (sizeOrParts.value == "sizeAndColor") {
        let index = treeData1.value.findIndex((item) => {
            return item.label == "未关联尺码颜色";
        });
        if (treeData1.value.length > 1) {
            return true;
        }
        if (treeData1.value[index].children[0].children.length > 0) {
            return true;
        }
        if (treeData1.value[index].children[1].children.length > 0) {
            return true;
        }
    }
    // 按颜色尺码查看 ==> 按配件查看
    if (sizeOrParts.value == "parts") {
        if (
            (treeData2.value[0] && treeData2.value[0].children.length > 0) ||
            (treeData2.value[1] && treeData2.value[1].children.length > 0)
        ) {
            return true;
        }
    }
    return false;
});

// tree
// 自定义节点类名
const customNodeClass = (data, node) => {
    // console.log("aaa", data, node);
    let title = "no-title";
    switch (node.level) {
        case 1:
            title = "is-title1 tree-level-1";
            break;
        case 2:
            title = "is-title2 tree-level-2";
            break;
        case 3:
            title = "tree-level-3";
            break;
        case 4:
            title = "tree-level-4";
            break;
    }
    return title;
};

const checkPartDialogShow = ref(false);
const checkPartDialogFun = () => {
    checkPartDialogShow.value = true;
    treeData2.value[0].children.sort((a, b) => {
        return a.listOrder - b.listOrder;
    });
    treeData2.value[1].children.sort((a, b) => {
        return a.listOrder - b.listOrder;
    });
    treeData1.value = changePartsToSkuFun(treeData2.value, colorDataCopy.value);
};

const treeData1 = ref([
    {
        label: "未关联尺码颜色",
        cate: "title1",
        children: [
            {
                label: "齋架",
                cate: "title2",
                children: [],
            },
            {
                label: "配件",
                num: "",
                orderType: "外購/舊",
                cate: "title2",
                children: [],
            },
        ],
    },
]);
const treeData2 = ref([
    {
        label: "齋架",
        cate: "title1",
        children: [],
    },
    {
        label: "配件",
        cate: "title1",
        children: [],
    },
]);

// 获取tree2所选节点
const getTree2CheckedKeys = (list) => {
    let keyList = [];
    function traverse(list) {
        list.forEach((node) => {
            if (node.checked) {
                keyList.push(node.ida);
            }
            if (node.children && node.children.length > 0) {
                traverse(node.children);
            }
        });
    }
    traverse(list);
    return keyList;
};
// 获取tree2所选节点
const delTree2CheckedKeys = (list) => {
    list.forEach((node) => {
        if (node.checked) {
            node["checked"] = false;
        }
        if (node.children && node.children.length > 0) {
            delTree2CheckedKeys(node.children);
        }
    });
};

// 按配件筛选
const handleParts = () => {
    treeFilterOptions.value["selectByNum"] = "all";
};

// 按颜色尺码查看 <==> 按配件查看
const handlesizeOrParts = (val) => {
    treeFilterOptions.value["selectBySku"] = "未关联尺码颜色";
    treeFilterOptions.value["selectByParts"] = "all";
    treeFilterOptions.value["selectByNum"] = "all";
    // 按颜色尺码查看 <== 按配件查看
    if (sizeOrParts.value == "sizeAndColor") {
        // 传入treeData2数据，返回treeData1数据
        treeData1.value = changePartsToSkuFun(
            treeData2.value,
            colorDataCopy.value
        );
        if (treeData1.value.length > 1) {
            treeFilterOptions.value.selectBySku = treeData1.value[1].label;
        }
    }
    // 按颜色尺码查看 ==> 按配件查看
    // if (sizeOrParts.value == "parts") {
    //     // 传入treeData1数据和颜色列表，返回treeData2数据
    //     treeData2.value = changeSkuToPartsFun(treeData1.value);
    // }
};

// 清空配件信息
const resPartData = (data) => {
    data["unit"] = "";
    data["sapDesc"] = "";
    data["groupDesc"] = "";
    data["group"] = "";
    data["sizeNum"] = "";
    data["workingProcedure"] = "";
    data["materialProperty"] = "";
    data["isSpleenMetalShare"] = "";
    data["moldStatus"] = "";
    data["isMoldAvailable"] = "";
    data["isNew"] = "0";
    data["editUnit"] = "0";
    data["editSapDesc"] = "0";
    data["editGroupDesc"] = "0";
    if (sizeOrParts.value == "sizeAndColor") {
        // 更新所有相关配数据
        resChangePartData(treeData2.value, deepClone2(data));
    }
};

// 元件编号 --主档编号 数值改变 ==> 执行元件编号基础校验  --- (外購新、外購舊、自制新)
const componentNumInput = (item) => {
    item["err"] = "";
    // 去除空格
    item.componentNum = item.componentNum.replace(/\s+/g, "");
    // 将小写转为大写
    item.componentNum = item.componentNum.toUpperCase();
    // 校验【英文-/.】组成
    const regex = /^[A-Z\.\-\/\d+]*$/;
    if(item.colorNum == undefined){
        item.colorNum = ""
    }
    if(item.componentNum == undefined){
        item.componentNum = ""
    }
    let str = item.componentNum + item.colorNum;
  
    if (str.length > 18) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "主档编号+颜色编号不能超过18位",
        // });
        ElNotification({
            title: "主档编号+颜色编号不能超过18位",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        item.componentNum = "";
        resPartData(item);
        return;
    }
    if (item.componentNum && !regex.test(item.componentNum)) {
        item.componentNum = "";
        item["err"] = "请输入合规内容";
        resPartData(item);
        return;
    }
    // // 外購/舊 改变编号，全部值清空
    // if (item.orderType == "外購/舊") {
    //     resPartData(item);
    // }
    if (item.orderType == "外購/新" || item.orderType == "外購/舊") {
        const regex2 = /^(SH\/).*/;
        if (item.componentNum && regex2.test(item.componentNum)) {
            item.componentNum = "";
            item["err"] = "外購配件不能以SH/开头";
            resPartData(item);
            return;
        }
    }
    if (item.orderType == "自制/新" || item.orderType == "自制/舊") {
        const regex3 = /^SH\//;
        if (
            item.componentNum &&
            item.componentNum.length >= 3 &&
            !regex3.test(item.componentNum)
        ) {
            item.componentNum = "";
            item["err"] = "自制配件只能以SH/开头";
            resPartData(item);
            return;
        }
    }
};
// 自制/舊、外購/舊  主档编号-失去焦点
const componentNumBlur = (item) => {
    if (!item.componentNum) return;
    // 外購/舊实时根据元件编号查询信息
    if (item.orderType == "外購/舊") {
        // 查询接口
        getArfcGetMaterialFun(item);
    }
    // 自制舊实时查询
    if (item.orderType == "自制/舊") {
        // 查询接口
        getAccessoryNumberDocumentNotLikeFun(item);
    }
    if (item.orderType == "外購/新") {
        resChangePartData(treeData2.value, deepClone2(item));
    }
};

// 外購/舊、自制/舊 --- 根据元件编号获取相关信息  --- 外購/舊：主编号改变； 自制/舊：颜色编号改变
const getArfcGetMaterialFun = debounce((item, type) => {
    if (item.colorNum) {
        item.colorNum = item.colorNum.toUpperCase();
    }
    if(item.colorNum == undefined){
        item.colorNum = ""
    }
    if(item.componentNum == undefined){
        item.componentNum = ""
    }
    let str = item.componentNum + (item.colorNum || "");
    if (str.length > 18) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "主档编号+颜色编号不能超过18位",
        // });
        ElNotification({
            title: "主档编号+颜色编号不能超过18位",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        // item.colorNum = "";
        // resPartData(item);
        // item.colorNum = "";
            // resPartData(item);
    if (sizeOrParts.value == "sizeAndColor") {
      resChangePartData(treeData2.value, deepClone2(item));
    }
        return;
    }
    if (item.orderType == "外購/舊") {
        let params = {
            MATERIAL: item.componentNum,
        };
        item["isNew"] = "0";
        item["editUnit"] = "0";
        item["editSapDesc"] = "0";
        item["editGroupDesc"] = "0";
        getArfcGetMaterial(params).then((res) => {
            // console.log(res);
            let  number = res.data.data.MATERIAL_LST[0].MATERIAL
            // let msg = 配件编号 XXXX，已被  SAP 锁定，不可使用！
            let msg = "配件编号"+number+ "已被  SAP 锁定，不可使用！"
            
            if (res.code != 0) {
                // 外購/舊改变编号，全部值清空
                resPartData(item);
                return;
            }
            let obj = null;
            if (res.data.data && res.data.data.MATERIAL_LST) {
                obj = res.data.data?.MATERIAL_LST[0];
            }
            if (obj && ["L1", "L3", "L5", "L6"].includes(obj.MSTAE)) {
                item["componentNum"] = "";
                item["colorNum"] = "";
                // ElMessage({
                //     type: "error",
                //     offset: "25",
                //     message: "配件已被禁止",
                //     duration: 9000,
                // });
                ElNotification({
                    title: msg,
                    type: "error",
                    position: "bottom-left",
                    customClass: "notification-item-err",
                });
                resPartData(item);
            } else if (obj) {
                // MATKL物料群组；MEINS单位；WGBEZ物料群组说明；DEPT物料说明
                item["unit"] = obj.MEINS || ""; // 单位
                item["sapDesc"] = obj.DEPT || ""; // 物料说明
                item["groupDesc"] = obj.WGBEZ || ""; // 物料群组说明
                item["group"] = obj.MATKL || ""; // 物料群组
                if (sizeOrParts.value == "sizeAndColor") {
                    resChangePartData(treeData2.value, deepClone2(item));
                }
            } else {
                item["isNew"] = "1";
                item["editGroupDesc"] = "1";
                item["sapDesc"] = "";
                item["groupDesc"] = "";
                item["group"] = "";
                item["workingProcedure"] = "";
                item["materialProperty"] = "";
                if (sizeOrParts.value == "sizeAndColor") {
                    resChangePartData(treeData2.value, deepClone2(item));
                }
            }
        });
    } else if (item.orderType == "自制/舊") {
        findAccessoryNumberDocumentFun(item, type);
    } else if (item.orderType == "自制/新") {
        findAccessoryNumberDocumentFun(item, type);
    } else {
        if (sizeOrParts.value == "sizeAndColor") {
            resChangePartData(treeData2.value, deepClone2(item));
        }
    }
}, 10);

// 通过主档编号和颜色编号获取元件详细信息 ------- 自制舊
const findAccessoryNumberDocumentFun = (item, type) => {
    let params = {
        accessoryNum: item.componentNum,
        colorNum: item.colorNum,
    };
    item["isNew"] = "0";
    item["editSapDesc"] = "0";
    item["editUnit"] = "0";
    findAccessoryNumberDocument(params).then((res) => {
        let obj = res.data.reaccessoryNumberDocument;
        if (res.code == 0 && obj.ID != 0) {
            item["sapDesc"] = obj.materialDesc || item.sapDesc || ""; // 物料说明
            item["sizeNum"] = obj.materialSize || ""; // 物料群组说明
            if (type != "last") {
                item["unit"] = obj.unit || ""; // 单位
                item["groupDesc"] = obj.materialGroupDesc || ""; // 物料群组说明
                item["group"] = obj.materialGroup || ""; // 物料群组说明
            }
            if (!item["unit"]) {
                item["editUnit"] = "1";
            } else {
                item["unit"] = obj.unit;
            }
            if (!obj.materialDesc) {
                item["editSapDesc"] = "1";
            }
        } else {
            item["isNew"] = "1";
            item["editUnit"] = "1";
            // item["unit"] = "";
            // item["groupDesc"] = "";
            // item["group"] = "";
        }
        if (sizeOrParts.value == "sizeAndColor") {
            // 更新所有相关配数据
            resChangePartData(treeData2.value, deepClone2(item));
        }
    });
};

// 精准获取 ---- 配件编号主档 -- 自制舊通过"主档编号"查详细信息
const getAccessoryNumberDocumentNotLikeFun = debounce((data) => {
    if (!data.componentNum) {
        resPartData(data);
        return;
    }
    data["sapDesc"] = "";
    getAccessoryNumberDocumentNotLike({ accessoryNum: data.componentNum }).then(
        (res) => {
            let  number = data.componentNum
            data["editUnit"] = "0";
            if (res.code == 0) {
                if (res.data.usageStatus == "禁止") {
                    data["componentNum"] = "";
                    data["colorNum"] = "";
                    // ElMessage({
                    //     type: "error",
                    //     offset: "25",
                    //     message: "配件已被禁止",
                    //     duration: 9000,
                    // });
                    let msg
                    ElNotification({
                        title:number+ "配件编号已被禁止",
                        type: "error",
                        position: "bottom-left",
                        customClass: "notification-item-err",
                    });
                    resPartData(data);
                } else {
                    data["unit"] = res.data.unit || ""; // 单位
                    data["groupDesc"] = res.data.materialGroupDesc || ""; // 物料群组说明
                    data["group"] = res.data.materialGroup || ""; // 物料群组说明
                    data["sapDesc"] = res.data.materialDesc || ""; // 物料说明
                    data["materialProperty"] = res.data.materialProperty || ""; // 材质
                    data["workingProcedure"] = res.data.workingProcedure || ""; // 工序
                    data["isSpleenMetalShare"] =
                        res.data.isSpleenMetalShare || ""; // 是否金叫共用
                    data["moldStatus"] = res.data.moldStatus || ""; //
                    data["isMoldAvailable"] = res.data.isMoldAvailable || ""; // 是否模具
                    if (!data["unit"]) {
                        data["editUnit"] = "1";
                    }
                    // 获取元件自制舊元件基本信息
                    findAccessoryNumberDocumentFun(data);
                }
            } else {
                resPartData(data);
            }
        }
    );
}, 800);

// 规格清单 ---- 尺码
const sizeNumInput = (data) => {
    if (!!data.sizeNum) {
        var pattern = /^\d+$/;
        if (!pattern.test(data.sizeNum)) {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "尺碼只能輸入數字",
            // });
            ElNotification({
                title: "尺碼只能輸入數字",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            data.sizeNum = "";
            if (sizeOrParts.value == "sizeAndColor") {
                // 更新所有相关配数据
                resChangePartData(treeData2.value, deepClone2(data));
            }
        }
        if (data.sizeNum.length > 5) {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "尺码不能超过5位",
            // });
            ElNotification({
                title: "尺码不能超过5位",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            data.sizeNum = "";
            if (sizeOrParts.value == "sizeAndColor") {
                // 更新所有相关配数据
                resChangePartData(treeData2.value, deepClone2(data));
            }
            return;
        }
    }
};

// 导入子层元件数据
const importPartDialogShow = ref(false);
const multipleTableRef = ref();
const importPartNumBom = ref("");
const importPartData = ref([]);
// 导入子层元件数据
const importPartDialog = () => {
    let treeCheckedKeys = [];
    if (sizeOrParts.value == "parts") {
        let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
        treeCheckedKeys = treeCheckedKeys2.filter((key) => {
            return !!key;
        });
    } else if (sizeOrParts.value == "sizeAndColor") {
        let treeCheckedKeys1 = treeRef1.value.getCheckedKeys(false);
        treeCheckedKeys1 = treeCheckedKeys1.filter((key) => {
            return !!key;
        });
        treeCheckedKeys = Array.from(new Set(treeCheckedKeys1));
    }
    if (treeCheckedKeys.length > 1) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "只能选择一个元件",
        // });
        ElNotification({
            title: "只能选择一个元件",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    let list = getTree2ItemLevel1(treeData2.value, treeCheckedKeys);
    if (list.length == 0) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "外購配件不能导入子层",
        // });
        ElNotification({
            title: "外購配件不能导入子层",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    } else if (list.length > 1) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "只能选择一个元件",
        // });
        ElNotification({
            title: "只能选择一个元件",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    importPartDialogShow.value = true;
    importPartNumBom.value = "";
    importPartData.value = [];
};
// 获取需要导入的子层元件
const importPartNumBomSearch = () => {
    if (!importPartNumBom.value) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "请输入编号",
        // });
        ElNotification({
            title: "请输入编号",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    // 获取bom子元件信息
    let params = {
        MATERIAL: importPartNumBom.value,
    };
    importPartData.value = [];
    getZrfcMatBomRead(params)
        .then((res) => {
            importPartData.value = res.data.data.BOM_STPO.map((item) => {
                item["count"] = 1;
                return item;
            });
        })
        .catch((err) => {
            // bomListShow.value = false;
        });
};
// 子层元件信息
const importSelectPartData = (item) => {
    let num = "";
    // item.COMP_QTY
    //     ? item.COMP_QTY.replace(/,/g, "").replace(/\s+/g, "") / 1000
    //     : "";
    if (item.COMP_QTY) {
        let num1 = item.COMP_QTY.replace(",", "") / 1000;
        num = num1.toFixed(6);
    }
    return {
        label: item.WGBEZ,
        componentNum: item.COMPONENT,
        colorNum: "",
        sizeNum: "",
        sapDesc: item.MAKTX,
        appearanceSpec: "",
        num: String(num),
        unit: item.COMP_UNIT,
        groupDesc: item.WGBEZ, // 物料群组说明
        group: item.MAT_GROUP, // 物料群组
        note: "",
        orderType: "外購/舊",
    };
};
// 导入选择的元件
const importSelectPart = () => {
    let treeCheckedKeys = [];
    if (sizeOrParts.value == "parts") {
        let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
        treeCheckedKeys = treeCheckedKeys2.filter((key) => {
            return !!key;
        });
    } else if (sizeOrParts.value == "sizeAndColor") {
        let treeCheckedKeys1 = treeRef1.value.getCheckedKeys(false);
        treeCheckedKeys1 = treeCheckedKeys1.filter((key) => {
            return !!key;
        });
        treeCheckedKeys = Array.from(new Set(treeCheckedKeys1));
    }
    let list = getTree2ItemLevel1(treeData2.value, treeCheckedKeys);
    let dateNum = new Date().getTime();
    list.forEach((vv, index) => {
        importPartData.value.forEach((mm, index2) => {
            let obj = importSelectPartData(mm);
            obj["ida"] = dateNum + "_" + "00" + "_" + index2;
            if (!vv.children) {
                vv.children = [];
            }
            vv.children.push(obj);
        });
    });
    if (sizeOrParts.value == "sizeAndColor") {
        treeData1.value = changePartsToSkuFun(
            treeData2.value,
            colorDataCopy.value
        );
    }

    importPartDialogShow.value = false;
};
// 获取tree2树的第一层元件
const getTree2ItemLevel1 = (treeData, checkKey) => {
    let list = [];
    treeData2.value[0].children.forEach((item) => {
        if (checkKey.includes(item.ida) && item.orderType.includes("自制")) {
            list.push(item);
        }
    });
    treeData2.value[1].children.forEach((item1) => {
        if (checkKey.includes(item1.ida) && item1.orderType.includes("自制")) {
            list.push(item1);
        }
    });
    return list;
};

// 弹窗：增加配件 ----------------------  start
const openDialogFrameShow = ref(false);
// 已选 齋架/配件
const frameListChecked = ref([]);

// 齋架/配件 列表
const frameList = ref([]);

// 自制外購
const orderTypeOptionsFun = (data) => {
    let l = props.frameList2.filter((res) => {
        return res.value == data.label;
    });
    let list = [];
    if (l.length > 0 && l[0].slefmadeOrOutsource == "永遠外購") {
        list = [
            {
                label: "外購/新",
                value: "外購/新",
            },
            {
                label: "外購/舊",
                value: "外購/舊",
            },
        ];
    } else if (l.length > 0 && l[0].slefmadeOrOutsource == "永遠自製") {
        list = [
            {
                label: "自制/新",
                value: "自制/新",
            },
            {
                label: "自制/舊",
                value: "自制/舊",
            },
        ];
    } else {
        list = [
            {
                label: "自制/新",
                value: "自制/新",
            },
            {
                label: "自制/舊",
                value: "自制/舊",
            },
            {
                label: "外購/新",
                value: "外購/新",
            },
            {
                label: "外購/舊",
                value: "外購/舊",
            },
        ];
    }
    if (data.children && data.children.length > 0) {
        list = [
            {
                label: "自制/新",
                value: "自制/新",
            },
            {
                label: "自制/舊",
                value: "自制/舊",
            },
        ];
    }
    return list;
};
// 外購
const orderTypeOptionsFun1 = (data) => {
    let l = props.frameList2.filter((res) => {
        return res.value == data.label;
    });
    let list = [];
    if (l.length > 0 && l[0].slefmadeOrOutsource == "永遠自製") {
        list = [];
    } else {
        list = [
            {
                label: "外購/新",
                value: "外購/新",
            },
            {
                label: "外購/舊",
                value: "外購/舊",
            },
        ];
    }
    return list;
};

// 添加子层
let openDialogFrameShowChild = ref(true);
// 添加配件弹窗
const openDialogFrameDialog = async (type) => {
    frameList.value = [];
    useDict("accessoryName").then((res) => {
        frameList.value = res.accessoryName.map((p) => {
            return {
                text: p.label,
                value: p.label,
                listOrder: p.sort,
                componentNum: "",
                colorNum: "",
                num: 1,
            };
        });
    });
    if (type == "child") {
        openDialogFrameShowChild.value = true;
        let treeCheckedKeys = [];
        if (sizeOrParts.value == "parts") {
            let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
            treeCheckedKeys = treeCheckedKeys2.filter((key) => {
                return !!key;
            });
        } else if (sizeOrParts.value == "sizeAndColor") {
            let treeCheckedKeys1 = treeRef1.value.getCheckedKeys(false);
            treeCheckedKeys1 = treeCheckedKeys1.filter((key) => {
                return !!key;
            });
            treeCheckedKeys = Array.from(new Set(treeCheckedKeys1));
        }
        let listCheck = getTree2ItemLevel1(treeData2.value, treeCheckedKeys);
        if (listCheck.length == 0) {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "请选选择一层自制配件",
            // });
            ElNotification({
                title: "请选选择一层自制配件",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            return;
        }
    } else {
        openDialogFrameShowChild.value = false;
    }
    openDialogFrameShow.value = true;
};
// 添加 齋架 或者配件
const addFrameAndParts = (val) => {
    let frameList2Obj = {};
    props.frameList2.forEach((item) => {
        frameList2Obj[item.value] = item.slefmadeOrOutsource;
    });
    // 已选中配件
    let list = frameList.value.filter((item) => {
        return frameListChecked.value.includes(item.value);
    });
    let colorL = [];
    let sizeL = [];
    if (colorDataCopy.value.length == 1 && sizeData.value.length == 1) {
        colorL = [...colorDataCopy.value];
        sizeL = [...sizeData.value];
    }
    let dateNum = new Date().getTime();
    let resList2 = [];
    for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < list[i].num; j++) {
            let orderT = "";
            if (frameList2Obj[list[i].value]) {
                orderT =
                    frameList2Obj[list[i].value] == "永遠自製"
                        ? "自制/舊"
                        : frameList2Obj[list[i].value] == "永遠外購"
                        ? "外購/舊"
                        : "";
            }
            resList2.push({
                label: list[i].value,
                cate: "title2",
                cate2: val == "parts" ? "title2-1" : "title2", //title2-1标识为配件
                colorListCheck: val == "frame" ? [] : [...colorL],
                sizeListCheck: [...sizeL],
                includedAngleList: [],
                ida: dateNum + "_" + i + "_" + j + Math.random() * 10000,
                orderType: orderT,
                note: "",
                listOrder: list[i].listOrder || 0,
            });
        }
    }
    if (val == "frame") {
        treeData2.value[0].children =
            treeData2.value[0].children.concat(resList2);
        treeData2.value[0].children.sort((a, b) => {
            return a.listOrder - b.listOrder;
        });
    } else if (val == "parts") {
        treeData2.value[1].children =
            treeData2.value[1].children.concat(resList2);
        treeData2.value[1].children.sort((a, b) => {
            return a.listOrder - b.listOrder;
        });
    }
    if (sizeOrParts.value == "sizeAndColor") {
        if (colorDataCopy.value.length == 1 && sizeData.value.length == 1) {
            treeFilterOptions.value.selectBySku = sizeL[0] + " " + colorL[0];
        }
        treeData1.value = changePartsToSkuFun(
            treeData2.value,
            colorDataCopy.value
        );
    }

    // 取消配件选中
    frameListChecked.value = [];
    frameList.value.map((a) => {
        a["num"] = 1;
        return a;
    });
};
// ---------------------- 增加配件 end

// ---------------------- 新增配件子层 start
const addFrameAndPartsChild = () => {
    let frameList2Obj = {};
    props.frameList2.forEach((item) => {
        frameList2Obj[item.value] = item.slefmadeOrOutsource;
    });
    let treeCheckedKeys = [];
    if (sizeOrParts.value == "parts") {
        let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
        treeCheckedKeys = treeCheckedKeys2.filter((key) => {
            return !!key;
        });
    } else if (sizeOrParts.value == "sizeAndColor") {
        let treeCheckedKeys1 = treeRef1.value.getCheckedKeys(false);
        treeCheckedKeys1 = treeCheckedKeys1.filter((key) => {
            return !!key;
        });
        treeCheckedKeys = Array.from(new Set(treeCheckedKeys1));
    }
    let listCheck = getTree2ItemLevel1(treeData2.value, treeCheckedKeys);

    // 已选中配件
    let list = frameList.value.filter((item) => {
        return frameListChecked.value.includes(item.value);
    });
    listCheck.forEach((partItem, index) => {
        let dateNum = new Date().getTime();
        let resList2 = [];
        // 组合需要导入的配件
        for (let i = 0; i < list.length; i++) {
            for (let j = 0; j < list[i].num; j++) {
                let orderT = "";
                if (frameList2Obj[list[i].value]) {
                    orderT =
                        frameList2Obj[list[i].value] == "永遠外購"
                            ? "外購/舊"
                            : "";
                }
                resList2.push({
                    label: list[i].value,
                    accessoryName: list[i].value,
                    colorListCheck: [],
                    sizeListCheck: [],
                    includedAngleList: [],
                    ida:
                        dateNum +
                        "_" +
                        i +
                        "_" +
                        j +
                        "_" +
                        index +
                        Math.random() * 100000,
                    orderType: orderT,
                    note: "",
                    listOrder: list[i].listOrder || 0,
                });
            }
        }
        if (!partItem.children) partItem["children"] = [];
        partItem.children = partItem.children.concat(resList2);
    });
    treeData2.value[0].children.sort((a, b) => {
        return a.listOrder - b.listOrder;
    });
    treeData2.value[1].children.sort((a, b) => {
        return a.listOrder - b.listOrder;
    });
    if (sizeOrParts.value == "sizeAndColor") {
        treeData1.value = changePartsToSkuFun(
            treeData2.value,
            colorDataCopy.value
        );
    }

    // 取消配件选中
    frameListChecked.value = [];
    frameList.value.map((a) => {
        a["num"] = 1;
        return a;
    });
    openDialogFrameShow.value = false;
};
// ---------------------- 新增配件子层 end

// 弹窗： 配件规格清单 复制所选弹窗 ---------------- start
const treeRef1 = ref();
const treeRef2 = ref();
// 复制所选弹窗
const copyCheckedShow = ref(false);
// 复制功能参数
const copyCheckedParams = ref({
    type: "配件",
    checkedSku: [],
    num: 1,
    // isToChild: "2",
});
// 复制配件弹窗
const copyCheckedDialog = () => {
    if (sizeOrParts.value == "parts") {
        let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
        treeCheckedKeys2 = treeCheckedKeys2.filter((key) => {
            return !!key;
        });
        if (treeCheckedKeys2.length == 0) {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "请选择要复制内容",
            // });
            ElNotification({
                title: "请选择要复制内容",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            return;
        }
    } else if (sizeOrParts.value == "sizeAndColor") {
        let treeCheckedKeys1 = treeRef1.value.getCheckedKeys(false);
        treeCheckedKeys1 = treeCheckedKeys1.filter((key) => {
            return !!key;
        });
        if (treeCheckedKeys1.length == 0) {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "请选择要复制内容",
            // });
            ElNotification({
                title: "请选择要复制内容",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            return;
        }
    }
    // 初始化表单
    copyCheckedParams.value = {
        num: 1,
    };
    copyCheckedShow.value = true;
};
// 复制所选
const copyChecked = () => {
    let num = copyCheckedParams.value.num;
    let treeCheckedKeys = [];
    if (sizeOrParts.value == "parts") {
        let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
        treeCheckedKeys = treeCheckedKeys2.filter((key) => {
            return !!key;
        });
    } else if (sizeOrParts.value == "sizeAndColor") {
        let treeCheckedKeys1 = treeRef1.value.getCheckedKeys(false);
        treeCheckedKeys1 = treeCheckedKeys1.filter((key) => {
            return !!key;
        });
        treeCheckedKeys = Array.from(new Set(treeCheckedKeys1));
    }
    let tree2CheckedList = {
        part1: [],
        part2: [],
    };
    // 所选配件
    tree2CheckedList = treeData2ToList(treeData2.value, treeCheckedKeys);
    Object.keys(tree2CheckedList).forEach((key) => {
        tree2CheckedList[key].forEach((item, index) => {
            for (let i = 0; i < num; i++) {
                let dateNum = new Date().getTime();
                let obj = deepClone2(item);
                obj["ida"] =
                    dateNum +
                    "_" +
                    "00" +
                    "_" +
                    index +
                    i +
                    key +
                    Math.floor(Math.random() * 100000);
                obj["cate2"] = "title2-1";
                if (obj.ID) delete obj.ID;
                if (obj.orderType == "自制/新") {
                    obj.orderType = "自制/舊";
                }
                if (obj.orderType == "外購/新") {
                    obj.orderType = "外購/舊";
                }
                if (obj.children && obj.children.length > 0) {
                    obj.children.forEach((child, n) => {
                        child["ida"] =
                            dateNum +
                            "_" +
                            "99" +
                            "_" +
                            index +
                            i +
                            n +
                            key +
                            Math.floor(Math.random() * 100000);
                        if (child.orderType == "自制/新") {
                            child.orderType = "自制/舊";
                        }
                        if (child.orderType == "外購/新") {
                            child.orderType = "外購/舊";
                        }
                        if (child.ID) delete child.ID;
                    });
                }
                if (key == "part1") {
                    treeData2.value[0].children.push(obj);
                }
                if (key == "part2") {
                    treeData2.value[1].children.push(obj);
                }
            }
        });
    });
    setTimeout(()=>{
        treeData2.value[0].children.sort((a, b) => {
            return a.listOrder - b.listOrder;
        });
        treeData2.value[1].children.sort((a, b) => {
            return a.listOrder - b.listOrder;
        });
        if (sizeOrParts.value == "sizeAndColor") {
            treeData1.value = changePartsToSkuFun(
                treeData2.value,
                colorDataCopy.value
            );
        }
        // 取消选中
        delTree2CheckedKeys(treeData2.value);
    },5)
    copyCheckedShow.value = false;
};
// 获取tree2data复制列表
const treeData2ToList = (tree, treeCheckedKeys2) => {
    let obj = {
        part1: [],
        part2: [],
    };
    tree.forEach((levelItem, level) => {
        levelItem.children.forEach((item) => {
            if (item.ida && treeCheckedKeys2.includes(item.ida)) {
                if (level == 0) {
                    obj.part1.push(item);
                }
                if (level == 1) {
                    obj.part2.push(item);
                }
            }
            if (item.children && item.children.length > 0) {
                item.children.forEach((item2) => {
                    if (item2.ida && treeCheckedKeys2.includes(item2.ida)) {
                        item2["includedAngleList"] =
                            item.includedAngleList || [];
                        item2["colorListCheck"] =
                            level == 0 ? [] : item.colorListCheck || [];
                        item2["sizeListCheck"] = item.sizeListCheck || [];
                        if (level == 0) {
                            obj.part1.push(item2);
                        }
                        if (level == 1) {
                            obj.part2.push(item2);
                        }
                    }
                });
            }
        });
    });
    return obj;
};
// 配件规格清单 复制所选弹窗 ---------------- end

// 批量删除 ----------------------- start
const delChecked = () => {
    // console.log("treeData2", treeData2.value);
    let treeCheckedKeys = [];
    if (sizeOrParts.value == "parts") {
        let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
        treeCheckedKeys = treeCheckedKeys2.filter((key) => {
            return !!key;
        });
    } else if (sizeOrParts.value == "sizeAndColor") {
        let treeCheckedKeys1 = treeRef1.value.getCheckedKeys(false);
        treeCheckedKeys = treeCheckedKeys1.filter((key) => {
            return !!key;
        });
    }
    if (treeCheckedKeys.length == 0) {
        ElNotification({
            title: "请选择要删除的配件",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    if (treeCheckedKeys.length > 1) {
        ElNotification({
            title: "只能删除一个配件,请逐个配件删除",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    ElMessageBox.confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        for (let i = treeData2.value[0].children.length - 1; i >= 0; i--) {
            let item = treeData2.value[0].children[i];
            if (treeCheckedKeys.includes(item.ida)) {
                treeData2.value[0].children.splice(i, 1);
            }
            if (item.children) {
                delTree(item.children, treeCheckedKeys);
            }
        }
        for (let i = treeData2.value[1].children.length - 1; i >= 0; i--) {
            let item = treeData2.value[1].children[i];
            if (treeCheckedKeys.includes(item.ida)) {
                treeData2.value[1].children.splice(i, 1);
            }
            if (item.children) {
                delTree(item.children, treeCheckedKeys);
            }
        }
        if (sizeOrParts.value == "sizeAndColor") {
            treeData1.value = changePartsToSkuFun(
                treeData2.value,
                colorDataCopy.value
            );
        }
    });
};

// 递归删除所选
const delTree = (treeData, checkKey) => {
    // debugger;
    for (let i = treeData.length - 1; i >= 0; i--) {
        if (treeData[i].children && treeData[i].children.length > 0) {
            delTree(treeData[i].children, checkKey);
        }
        if (checkKey.includes(treeData[i].ida)) {
            treeData.splice(i, 1);
        }
    }
};

// 批量删除 ----------------------- end
// 齋架配件全选 --------- start
const seletAll1 = (val, data) => {
    console.log(val, data);
    // 保存当前所有节点的勾选状态
    var checkedNodes = treeRef1.value?.getCheckedNodes();
    if (val) {
        treeRef1.value?.setCheckedNodes(
            checkedNodes.concat(data.children),
            val
        );
    } else {
        let curL = checkedNodes.filter((item) => {
            let i = data.children.findIndex((m) => {
                return m.ida == item.ida;
            });
            return i == -1;
        });
        treeRef1.value?.setCheckedNodes(curL, val);
    }
};
const seletAll2 = (val, data) => {
    if (!data.children) return;
    data.children.forEach((item) => {
        item.checked = val;
    });
};
// 齋架配件全选 --------- end

// 弹窗：自制新编号配置 ------------ start
const componentNumSetNewShow = ref(false); // 自制新配件编号配置弹窗
// 自制新配件编号配置表单
const componentNumFrom = ref({});
const componentNumSaveLoading = ref(false);
const materialOptions = ref([]); // 材质
const workingProcedureOptions = ref([]); // 工艺
const currentItem = ref({}); // 当前的item

// 元件编号获取焦点 -- 自制新 、 外購新
const componentNumFocus = (item) => {
    item["err"] = "";
    currentItem.value = item;
    if (item.orderType == "自制/新") {
        openComponentNumDialog(item);
    } else if (item.orderType == "外購/新" && !item.componentNum) {
        // 获取外購新编号
        let params = {
            orderType: "outsourcing",
        };
        getNewAccessoryNumByMaterialWorkship(params).then((res) => {
            if (res.code == 0) {
                item["componentNum"] = res.data.ComponentNum;
                if (sizeOrParts.value == "sizeAndColor") {
                    resChangePartData(treeData2.value, deepClone2(item));
                }
            }
        });
    }
};

// 打开自制新编号配置弹窗
const openComponentNumDialog = async (item) => {
    componentNumSetNewShow.value = true;
    // 初始化弹窗表单
    componentNumFrom.value = {
        workingProcedure: item.workingProcedure || "",
        material: item.materialProperty || "",
    };
    // 工序列表
    workingProcedureOptions.value = [];
    // 材质列表
    materialOptions.value = [];
    // 获取材质类别列表
    getMaterialCategoryDocumentList({
        page: 1,
        pageSize: 999,
        accessoryName: item.label,
    }).then((res) => {
        materialOptions.value = res.data.list.map((res) => {
            let obj = res;
            obj["label"] = res.materialCharacteristy;
            obj["value"] = res.materialCharacteristy;
            return obj;
        });
    });
    if (!!item.materialProperty) {
        getWorkingProcedureList();
    }
};
// 材质改变
const materialOptionsChange = (val) => {
    workingProcedureOptions.value = [];
    componentNumFrom.value["workingProcedure"] = "";
    componentNumFrom.value["isSpleenMetalShare"] = ""; // 是否辨别金胶共用
    getWorkingProcedureList();
};
// 根据材质和配件名称获取工序列表
const getWorkingProcedureList = () => {
    if (!componentNumFrom.value.material) return;
    // 工序
    getAccessoryNumberSettingList({
        page: 1,
        pageSize: 999,
        accessoryName: currentItem.value.label,
        materialCharacteristy: componentNumFrom.value.material,
    }).then((res) => {
        workingProcedureOptions.value = res.data.list.map((res) => {
            if (!res.workingProcedure) {
                res.workingProcedure = " ";
            }
            return {
                ...res,
                label: res.workingProcedure,
                value: res.workingProcedure,
            };
        });
        // .filter((r) => {
        //     return r.value != "";
        // });
    });
};
// 工序改变
const workingProcedureChange = () => {
    let list = workingProcedureOptions.value.filter((res) => {
        return (
            res.workingProcedure?.replace(/\s/g, "") ==
            componentNumFrom.value.workingProcedure?.replace(/\s/g, "")
        );
    });
    if (list.length > 0) {
        componentNumFrom.value["isSpleenMetalShare"] =
            list[0].isSpleenMetalShare;
    }
};

// 确认获取自制新编号
const componentNumSave = () => {
    if (
        !componentNumFrom.value.workingProcedure &&
        !componentNumFrom.value.material &&
        !componentNumFrom.value.num
    ) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "必须填写一项",
        // });
        ElNotification({
            title: "必须填写一项",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    if (!componentNumFrom.value.material) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "材质必填",
        // });
        ElNotification({
            title: "材质必填",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }

    let params = {
        orderType: "self-control",
        accessoryNum: componentNumFrom.value.num, //主档编号
        accessoryName: currentItem.value.label, // 配件名称
        materialCharacteristy: componentNumFrom.value.material, // 材质类别
        workingProcedure: componentNumFrom.value.workingProcedure, // 工序
    };
    if (currentItem.value.componentNum) {
        params["genAccessoryNum"] = currentItem.value.componentNum;
    }
    componentNumSaveLoading.value = true;
    // 生成自制新编号： 根据工序材质或者自制新编号
    getNewAccessoryNumByMaterialWorkship(params)
        .then((res) => {
            componentNumSaveLoading.value = false;
            componentNumSetNewShow.value = false;
            if (res.code == 0) {
                currentItem.value["componentNum"] = res.data.ComponentNum;
                currentItem.value["groupDesc"] = res.data.materialGroupName;
                currentItem.value["group"] = res.data.materialGroupNum;
                currentItem.value["workingProcedure"] =
                    componentNumFrom.value.workingProcedure || "";
                currentItem.value["materialProperty"] =
                    componentNumFrom.value.material || "";
                currentItem.value["isSpleenMetalShare"] =
                    componentNumFrom.value.isSpleenMetalShare || "";
                if (sizeOrParts.value == "sizeAndColor") {
                    resChangePartData(
                        treeData2.value,
                        deepClone2(currentItem.value)
                    );
                }
            }
        })
        .catch((err) => {
            componentNumSaveLoading.value = false;
            componentNumSetNewShow.value = false;
        });
};

// 自制新编号配置 ------------ end

// 按颜色尺码查看修改配件，相同配件同步修改
const changePartsValue = (data) => {
    if (sizeOrParts.value == "sizeAndColor") {
        // 递归查找修改对应配置内容
        resChangePartData(treeData2.value, deepClone2(data));
    }
};
const resChangePartData = (list, data) => {
    function rest(arr, d) {
        arr.forEach((item) => {
            if (item.ida && item.ida == data.ida) {
                item["componentNum"] = data.componentNum || "";
                item["colorNum"] = data.colorNum || "";
                item["sizeNum"] = data.sizeNum || "";
                item["sapDesc"] = data.sapDesc || "";
                item["appearanceSpec"] = data.appearanceSpec || "";
                item["num"] = data.num || "";
                item["unit"] = data.unit || "";
                item["groupDesc"] = data.groupDesc || "";
                item["group"] = data.group || "";
                item["note"] = data.note || "";
                item["orderType"] = data.orderType;
                item["materialProperty"] = data.materialProperty || ""; //材质属性
                item["workingProcedure"] = data.workingProcedure || ""; //工序
                item["isSpleenMetalShare"] = data.isSpleenMetalShare || ""; // 是否辨别金胶共用
                item["moldStatus"] = data.moldStatus || ""; //
                item["isMoldAvailable"] = data.isMoldAvailable || ""; // 是否起模
                item["isNew"] = data.isNew || "0";
                item["editUnit"] = data.editUnit || "0";
                item["editSapDesc"] = data.editSapDesc || "0";
                item["editGroupDesc"] = data.editGroupDesc || "0";
                item["err"] = data.err || "";
            }
            if (item.children && item.children.length > 0) {
                rest(item.children, d);
            }
        });
    }
    rest(treeData2.value, data);
    setTimeout(() => {
        treeData1.value = changePartsToSkuFun(
            treeData2.value,
            colorDataCopy.value
        );
    }, 30);
};
// 自制外購类型改变(新、舊)
const orderTypeChange = (data) => {
    data["componentNum"] = ""; //元件编号
    data["colorNum"] = "";
    data["sizeNum"] = ""; //尺码
    data["sapDesc"] = ""; //SAP物料说明
    // data["appearanceSpec"] = ""; //外观规格
    // data["num"] = ""; //数量
    // data["unit"] = ""; //unit
    data["groupDesc"] = ""; //物料群组说明/编号
    data["group"] = ""; //物料群组
    // data["note"] = ""; //备注
    data["materialProperty"] = ""; //材质属性
    data["workingProcedure"] = ""; //工序
    data["isSpleenMetalShare"] = ""; //是否辨别金胶共用
    data["isMoldAvailable"] = ""; //
    data["moldStatus"] = ""; // 模具状态
    data["sapDelete"] = 0; // 已汇入sap
    data["is_na"] = 0; // na
    data["isNew"] = "0";
    data["editUnit"] = "0";
    data["editSapDesc"] = "0";
    if (data.orderType == "外購/舊") {
        data["editGroupDesc"] = "1";
    }
    if (data.orderType == "自制/新") {
        data["editSapDesc"] = "1";
        data["editUnit"] = "1";
        data["editGroupDesc"] = "1";
    }
    if (sizeOrParts.value == "sizeAndColor") {
        // 递归查找修改对应配置内容
        resChangePartData(treeData2.value, deepClone2(data));
    }
};

// 关联斋假尺码
const relevancyZhaiJiaSizeCheck = ref(false);
const relevancyZhaiJiaSize = () => {
    relevancyZhaiJiaSizeCheck.value = !relevancyZhaiJiaSizeCheck.value;
    if (relevancyZhaiJiaSizeCheck.value) {
        treeData2.value[0].children.forEach((item) => {
            item["sizeListCheck"] = [...sizeData.value];
        });
    } else {
        treeData2.value[0].children.forEach((item) => {
            item["sizeListCheck"] = [];
        });
    }
};
// 关联配件尺码
const relevancyPeiJianSizeCheck = ref(false);
const relevancyPeiJianSize = () => {
    relevancyPeiJianSizeCheck.value = !relevancyPeiJianSizeCheck.value;
    if (relevancyPeiJianSizeCheck.value) {
        treeData2.value[1].children.forEach((item) => {
            item["sizeListCheck"] = [...sizeData.value];
        });
    } else {
        treeData2.value[1].children.forEach((item) => {
            item["sizeListCheck"] = [];
        });
    }
};
// 关联加脚尺碼
const relevancyJiaJiaoSizeCheck = ref(false);
const relevancyJiaJiaoSize = () => {
    treeData2.value.forEach((val, index) => {
        treeData2.value[index].children?.forEach((item) => {
            if (item.checked) {
                item["includedAngleList"] = [...includedAngleListCopy.value];
            }
        });
    });
    // 取消选中
    delTree2CheckedKeys(treeData2.value);
};

// 颜色修改同步修改关联颜色序号
const colorChangeFun = (colorChangeVal) => {
    let list2 = deepClone2(treeData2.value);
    list2.forEach((list2Item) => {
        list2Item.children.forEach((row) => {
            for (let i = row.colorListCheck.length - 1; i >= 0; i--) {
                if (colorChangeVal[row.colorListCheck[i]]) {
                    row.colorListCheck[i] =
                        colorChangeVal[row.colorListCheck[i]];
                } else if (!colorChangeVal[row.colorListCheck[i]]) {
                    row.colorListCheck.splice(i, 1);
                }
            }
        });
    });
    treeData2.value = list2;
    if (sizeOrParts.value == "sizeAndColor") {
        setTimeout(() => {
            treeData1.value = changePartsToSkuFun(
                treeData2.value,
                colorDataCopy.value
            );
        }, 30);
    }
};

// 失去焦点校验小数点后不能超过六位数
const numBlurCheck = (data) => {
    data["errNum"] = "";
    data.num = data.num ? data.num.replace(/\s+/g, "") : "";
    if (data.num && !/^\-?\d+\.?\d*$/.test(data.num)) {
        data["errNum"] = "请输入数字";
        data.num = "";
        return;
    }
    let numLastLen = data.num.toString().split(".")[1]?.length;
    if (numLastLen && numLastLen > 6) {
        data.num = "";
        data["errNum"] = "小数点后不能超过6位";
        return;
    }
};

// 查询- 根据配件编号查询配件主档列表 ---- start ---
const searchPartsMainShow = ref(false);
const searchPartsKeyword = ref("");
const searchPartsList = ref([]); // 模糊搜索主档编号列表
const currentSearchRow = ref({});
const currentPart = ref({});
// 根据关键字搜索主档编号
const searchPartsMain = (data) => {
    currentPart.value = data;
    let accessoryNum =
        searchPartsKeyword.value ||
        data.componentNum ||
        currentPart.value.componentNum;
    searchPartsList.value = [];
    searchPartsMainShow.value = true;
    currentSearchRow.value = {};
    if (!accessoryNum) return;
    getAccessoryNumberDocumentList({
        page: 1,
        pageSize: 100,
        accessoryNum: accessoryNum,
        orderType: currentPart.value.orderType,
        searchType: "productSpec",
    }).then((res) => {
        // 置空查询参数
        searchPartsKeyword.value = "";
        if (res.code == 0) {
            searchPartsList.value = res.data.list
                .filter((res) => {
                    return !!res.accessoryNum;
                })
                .map((item) => {
                    item["label"] = item.accessoryNum;
                    item["value"] = item.accessoryNum;
                    return item;
                });
            searchPartsList.value.sort((a, b) => {
                let a1 = (a.accessoryNum || "") + (a.colorNum || "");
                let b1 = (b.accessoryNum || "") + (b.colorNum || "");
                return a1.localeCompare(b1);
            });
        }
    });
};
// 设置弹窗单个选择
const handleCurrentChange = (val) => {
    currentSearchRow.value = val;
};
// 确定选择弹窗元件编号
const confirmSelectPart = () => {
    if (currentSearchRow.value.accessoryNum) {
        currentPart.value["groupDesc"] =
            currentSearchRow.value.materialGroupDesc; // 物料群组说明/编号
        currentPart.value["group"] = currentSearchRow.value.materialGroup; // 物料群组
        currentPart.value["sapDesc"] = currentSearchRow.value.materialDesc; // SAP物料说明
        currentPart.value["unit"] = currentSearchRow.value.unit;
        currentPart.value["sizeNum"] = currentSearchRow.value.materialSize;
        currentPart.value["componentNum"] = currentSearchRow.value.accessoryNum;
        currentPart.value["colorNum"] = currentSearchRow.value.colorNum;
        currentPart.value["materialProperty"] =
            currentSearchRow.value.materialProperty; // 材质
        currentPart.value["workingProcedure"] =
            currentSearchRow.value.workingProcedure; // 工序
        currentPart.value["isNew"] = "0";
        if (sizeOrParts.value == "sizeAndColor") {
            // 更新所有相关配数据
            resChangePartData(treeData2.value, deepClone2(currentPart.value));
        }
    }
    searchPartsMainShow.value = false;
};

// 双击跳转配件详情
const rowDblclick = (row) => {
    searchPartsMainShow.value = false;
    router.push({
        path: "/layout/confAccessoryNumberDocumentAdd",
        query: {
            ID: row.ID,
        },
    });
};
// 根据配件编号查询配件主档列表 ---- end ---

// bom子配件列表查询
const bomListShow = ref(false);
const bomList = ref([]);
const bomPartlevel1 = ref({});
// 获取bom列表
const getBomList = (item) => {
    bomList.value = [];
    bomListShow.value = true;
    if (item.componentNum) {
        bomPartlevel1.value = item;
        let colorN = item.colorNum || "";
        let params = {
            MATERIAL: item.componentNum + colorN,
        };
        getZrfcMatBomRead(params)
            .then((res) => {
                // console.log(res);
                bomList.value = res.data.data.BOM_STPO.map((row) => {
                    if (row.COMP_QTY) {
                        row.COMP_QTY = row.COMP_QTY.replace(",", "") / 1000;
                        row.COMP_QTY = row.COMP_QTY.toFixed(6);
                    }
                    return row;
                });
            })
            .catch((err) => {
                // bomListShow.value = false;
            });
    } else {
        bomPartlevel1.value = {};
    }
};

// is Na
const NAchange = (val, data) => {
    if (val) {
        data["colorListCheck"] = [...colorDataCopy.value];
        data["sizeListCheck"] = [...sizeData.value];
        data["includedAngleList"] = [...includedAngleListCopy.value];
    }
};

// 颜色全选
const colorCheckAll = (val, data) => {
    if (val) {
        data.colorListCheck = [...colorDataCopy.value];
    } else {
        data.colorListCheck = [];
    }
};

// 初始化或者更新 树数据
const updateTreeData = (treeVal, times) => {
    treeData1.value = [];
    treeData2.value = [];
    // treeData1.value = deepClone2(treeVal);
    // treeData2.value = changeSkuToPartsFun(treeData1.value);
    treeData2.value = deepClone2(treeVal);
    treeData1.value = changePartsToSkuFun(treeData2.value, colorDataCopy.value);

    if (treeData1.value.length > 1 && times == "once") {
        treeFilterOptions.value["selectBySku"] = treeData1.value[1].label;
    } else if (treeData1.value.length > 1) {
        let index = treeData1.value.findIndex((item) => {
            return item.label == treeFilterOptions.value["selectBySku"];
        });
        if (index != -1) {
            let len1 =
                treeData1.value[index].children[0]?.children?.length || 0;
            let len2 =
                treeData1.value[index].children[1]?.children?.length || 0;
            if (len1 == 0 && len2 == 0) {
                treeFilterOptions.value["selectBySku"] =
                    treeData1.value[1].label;
            }
        }
    }
    // 已汇入sap标识
    let sizeL = props.sizeData
        .filter((res) => {
            return res.sapImported == 1;
        })
        .map((item) => {
            return item.sizeNum;
        });
    let colorL = props.colorData
        .filter((res) => {
            return res.sapImported == 1;
        })
        .map((item) => {
            return item.colorNum;
        });
    let list = sizeL.reduce((pre, cur, index) => {
        let ll = colorL.map((item) => {
            return cur + " " + item;
        });
        return pre.concat(ll);
    }, []);
    sapImportedSkuList.value = list;
};

// 复制配件  产品规格 <--> 设计规格
const copyPartSpecification = () => {
    emit("copyPartSpecification", props.delType);
};

// 添加复制配件
const addCopyPart = (list, type) => {
    let partList = deepClone2(list);
    partList.forEach((item1, index1) => {
        let dateNum = new Date().getTime();
        item1["ida"] =
            dateNum + "_" + index1 + "_" + Math.floor(Math.random() * 100000);
        if (item1.ID) delete item1.ID;
        if (type != "partSpecification1") {
            if (item1.orderType == "自制/新") {
                item1.orderType = "自制/舊";
            }
        }
        if (item1.orderType == "外購/新") {
            item1.orderType = "外購/舊";
        }
        if (item1.children && item1.children.length > 0) {
            item1.children.forEach((item2, index2) => {
                item2["ida"] =
                    dateNum +
                    "_" +
                    index1 +
                    "_" +
                    index2 +
                    Math.floor(Math.random() * 100000);
                if (item2.ID) delete item2.ID;
                if (type != "partSpecification1") {
                    if (item2.orderType == "自制/新") {
                        item2.orderType = "自制/舊";
                    }
                }
                if (item2.orderType == "外購/新") {
                    item2.orderType = "外購/舊";
                }
            });
        }
    });
    partList.forEach((item) => {
        if (item.accessoryType == "齋架") {
            treeData2.value[0].children.push(item);
        } else if (item.accessoryType == "配件") {
            treeData2.value[1].children.push(item);
        }
    });
    treeData1.value = changePartsToSkuFun(treeData2.value, colorDataCopy.value);
    if (
        treeData1.value.length > 1 &&
        treeFilterOptions.value["selectBySku"] == "未关联尺码颜色"
    ) {
        treeFilterOptions.value["selectBySku"] = treeData1.value[1].label;
    }
};

// tree夹角改变
const treeJiaJiaoEdit = (list, sizeChangeVal) => {
    list.forEach((item) => {
        if (item.includedAngleList && item.includedAngleList.length > 0) {
            let i = item.includedAngleList.findIndex((v) => {
                return v == sizeChangeVal.sizeOld.split("-")[2];
            });
            if (i != -1) {
                item.includedAngleList[i] = sizeChangeVal.sizeNew.split("-")[2];
            }
            item.includedAngleList = Array.from(
                new Set(item.includedAngleList)
            );
        }
        if (item.children) {
            treeJiaJiaoEdit(item.children, sizeChangeVal);
        }
    });
};
// tree夹角删除
const treeJiaJiaoDel = (list, checkL) => {
    list.forEach((item) => {
        if (item.includedAngleList) {
            let ll = item.includedAngleList.filter((a) => {
                let jList = checkL.map((r) => {
                    return r.split("-")[2];
                });
                return jList.includes(a);
            });
            item.includedAngleList = ll;
        }
        if (item.children) {
            treeJiaJiaoDel(item.children, checkL);
        }
    });
};
// tree2 收起展开
const tree2levelShow = ref({
    leve1show: true,
    leve2show: true,
});
const tree2levelHandle = (item, val) => {
    tree2levelShow.value[item] = val;
};

/**************移出子层-移至子层 start*****************/
// 移动配件弹窗
const targetPartDialog = ref(false);
const moveList1 = ref([]);
const targetPartList1Ref = ref();
const targetPartList2Ref = ref();
const targetPartList1 = ref([]);
const targetPartList2 = ref([]);
const targetPartList1Sel = ref([]);
const targetPartList2Sel = ref([]);
// 齋架选择
const targetPartListChange1Select = (selection) => {
    if (selection.length > 1) {
        const del_row = selection.shift();
        targetPartList1Ref.value.toggleRowSelection(del_row, false);
    }
};
// 配件选择
const targetPartListChange2Select = (selection) => {
    if (selection.length > 1) {
        const del_row = selection.shift();
        targetPartList2Ref.value.toggleRowSelection(del_row, false);
    }
};
const targetPartListChange1 = (val) => {
    if (targetPartList2Sel.value.length > 0) {
        targetPartList2Ref.value?.clearSelection();
    }
    targetPartList2Sel.value = [];
    targetPartList1Sel.value = val;
};
const targetPartListChange2 = (val) => {
    if (targetPartList1Sel.value.length > 0) {
        targetPartList1Ref.value?.clearSelection();
    }
    targetPartList1Sel.value = [];
    targetPartList2Sel.value = val;
};
// 移至子层弹窗 -- 选择目标前  --- 按配件查看
const moveToLevel2DialogFun = () => {
    // let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
    targetPartList1.value = [];
    targetPartList2.value = [];
    targetPartList1Sel.value = [];
    targetPartList2Sel.value = [];
    moveList1.value = [];
    // 获取需要移动的配件
    for (let index in [0, 1]) {
        for (let i = 0; i < treeData2.value[index].children.length; i++) {
            let part1 = deepClone2(treeData2.value[index].children[i]);
            if (
                part1.checked &&
                (part1.orderType.includes("自制") || !part1.orderType)
            ) {
                // ElMessage({
                //     type: "error",
                //     offset: "25",
                //     message: "自制配件不能是二级配件",
                // });
                ElNotification({
                    title: "自制配件不能是二级配件",
                    type: "error",
                    position: "bottom-left",
                    customClass: "notification-item-err",
                });
                return;
            }
            if (part1.orderType.includes("外購") && part1.checked) {
                moveList1.value.push(part1);
            }
            // 需要移动的子层
            if (part1.orderType.includes("自制") && part1.children) {
                part1.children.forEach((item) => {
                    if (item.checked) {
                        moveList1.value.push(item);
                    }
                });
            }
            if (
                part1.orderType.includes("自制") &&
                index == 0 &&
                !!part1.componentNum
            ) {
                part1["children"] = [];
                targetPartList1.value.push(part1);
            }
            if (
                part1.orderType.includes("自制") &&
                index == 1 &&
                !!part1.componentNum
            ) {
                part1["children"] = [];
                targetPartList2.value.push(part1);
            }
        }
    }
    if (moveList1.value.length == 0) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "请选择要移动的配件",
        // });
        ElNotification({
            title: "请选择要移动的配件",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    targetPartDialog.value = true;
};
// 移至子层弹窗 -- 选择目标前  --- 按尺码颜色查看
const moveToLevel2DialogFun2 = () => {
    // let treeCheckedKeys2 = getTree2CheckedKeys(treeData2.value);
    targetPartList1.value = [];
    targetPartList2.value = [];
    targetPartList1Sel.value = [];
    targetPartList2Sel.value = [];
    moveList1.value = [];

    let treeCheckedKeys1 = treeRef1.value.getCheckedKeys(false);
    let treeCheckedKeys = treeCheckedKeys1.filter((key) => {
        return !!key;
    });
    // 获取需要移动的配件
    for (let index in [0, 1]) {
        for (
            let i = 0;
            i < treeData1Copy.value[0].children[index].children.length;
            i++
        ) {
            let part1 = deepClone2(
                treeData1Copy.value[0].children[index].children[i]
            );
            if (
                treeCheckedKeys.includes(part1.ida) &&
                (part1.orderType.includes("自制") || !part1.orderType)
            ) {
                // ElMessage({
                //     type: "error",
                //     offset: "25",
                //     message: "自制配件不能是二级配件",
                // });
                ElNotification({
                    title: "自制配件不能是二级配件",
                    type: "error",
                    position: "bottom-left",
                    customClass: "notification-item-err",
                });
                return;
            }
            if (
                part1.orderType.includes("外購") &&
                treeCheckedKeys.includes(part1.ida)
            ) {
                moveList1.value.push(part1);
            }
            // 需要移动的子层
            if (part1.orderType.includes("自制") && part1.children) {
                part1.children.forEach((item) => {
                    if (treeCheckedKeys.includes(item.ida)) {
                        moveList1.value.push(item);
                    }
                });
            }
            if (
                part1.orderType.includes("自制") &&
                index == 0 &&
                !!part1.componentNum
            ) {
                part1["children"] = [];
                targetPartList1.value.push(part1);
            }
            if (
                part1.orderType.includes("自制") &&
                index == 1 &&
                !!part1.componentNum
            ) {
                part1["children"] = [];
                targetPartList2.value.push(part1);
            }
        }
    }
    if (moveList1.value.length == 0) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "请选择要移动的配件",
        // });
        ElNotification({
            title: "请选择要移动的配件",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    targetPartDialog.value = true;
};

// 移至子层确定
let moveToLevel2Loading = ref(false);
const moveToLevel2DialogFunConfirm = () => {
    if (
        targetPartList1Sel.value.length == 0 &&
        targetPartList2Sel.value.length == 0
    ) {
        // ElMessage({ type: "error", offset: "25", message: "请选择目标配件" });
        ElNotification({
            title: "请选择要移动的配件",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    moveToLevel2Loading.value = true;
    let p = {};
    if (targetPartList1Sel.value.length == 0 && targetPartList2Sel.value[0]) {
        p = targetPartList2Sel.value[0];
    } else if (
        targetPartList1Sel.value[0] &&
        targetPartList2Sel.value.length == 0
    ) {
        p = targetPartList1Sel.value[0];
    }
    if (!p.componentNum) {
        moveToLevel2Loading.value = false;
        return;
    }
    let colorN = p.colorNum || "";
    let params = {
        MATERIAL: p.componentNum + colorN,
    };
    getZrfcMatBomRead(params)
        .then((aa) => {
            moveToLevel2Loading.value = false;
            if (
                aa.code == 0 &&
                aa.data.data &&
                aa.data.data.BOM_STPO.length > 0
            ) {
                // ElMessage({
                //     type: "error",
                //     offset: "25",
                //     message: "bom存在子层，不能添加子层",
                // });
                ElNotification({
                    title: "bom存在子层，不能添加子层",
                    type: "error",
                    position: "bottom-left",
                    customClass: "notification-item-err",
                });
                return;
            }
            if (aa.code != 0) return;
            let list = recursivefilter(treeData2.value);
            list[0].children.forEach((part, n) => {
                let idas = targetPartList1Sel.value.map((val) => {
                    return val.ida;
                });
                if (idas.includes(part.ida)) {
                    if (!part.children) part["children"] = [];
                    let list = moveList1.value.map((res, i) => {
                        if (res.ID) delete res.ID;
                        res["checked"] = false;
                        return res;
                    });
                    part.children = part.children.concat(deepClone2(list));
                }
            });
            list[1].children.forEach((part, n) => {
                let idas = targetPartList2Sel.value.map((val) => {
                    return val.ida;
                });
                if (idas.includes(part.ida)) {
                    if (!part.children) part["children"] = [];
                    let list = moveList1.value.map((res, i) => {
                        if (res.ID) delete res.ID;
                        res["checked"] = false;
                        return res;
                    });
                    part.children = part.children.concat(deepClone2(list));
                }
            });
            treeData2.value = deepClone2(list);
            targetPartDialog.value = false;
            if (sizeOrParts.value == "sizeAndColor") {
                treeData1.value = changePartsToSkuFun(
                    treeData2.value,
                    colorDataCopy.value
                );
            }
        })
        .catch((err) => {
            // bomListShow.value = false;
        });
};
//递归过滤 - 匹配到的数组对象 - 去除
const recursivefilter = (arr) => {
    return arr.filter((item) => {
        let index = moveList1.value.findIndex((v) => {
            return v.ida == item.ida;
        });
        if (index != -1) {
            return false;
        }
        if (item.children && item.children.length > 0) {
            item.children = recursivefilter(item.children);
        }
        return true;
    });
};

// 移出子层
let moveListToLeft = ref([]);
const moveToLevel1Fun = () => {
    let treeCheckedKeys = [];
    if (sizeOrParts.value == "sizeAndColor") {
        treeCheckedKeys = treeRef1.value.getCheckedKeys(false);
    } else if (sizeOrParts.value == "parts") {
        treeCheckedKeys = getTree2CheckedKeys(treeData2.value);
    }

    for (let i = 0; i < treeData2.value[0].children.length; i++) {
        let frame = treeData2.value[0].children[i];
        if (frame.children) {
            let checkLFrame1 = frame.children.filter((res) => {
                return treeCheckedKeys.includes(res.ida);
            });
            let checkLFrame2 = frame.children.filter((res) => {
                return !treeCheckedKeys.includes(res.ida);
            });
            let checkLFrame11 = checkLFrame1.map((p) => {
                p["colorListCheck"] = [];
                p["sizeListCheck"] = frame.sizeListCheck || [];
                p["includedAngleList"] = frame.includedAngleList || [];
                return p;
            });
            frame.children = deepClone2(checkLFrame2);
            treeData2.value[0].children = treeData2.value[0].children.concat(
                deepClone2(checkLFrame11)
            );
        }
    }
    for (let j = 0; j < treeData2.value[1].children.length; j++) {
        let part1 = treeData2.value[1].children[j];
        if (part1.children) {
            let checkL1 = part1.children.filter((res) => {
                return treeCheckedKeys.includes(res.ida);
            });
            let checkL2 = part1.children.filter((res) => {
                return !treeCheckedKeys.includes(res.ida);
            });
            let checkL11 = checkL1.map((p) => {
                p["colorListCheck"] = part1.colorListCheck || [];
                p["sizeListCheck"] = part1.sizeListCheck || [];
                p["includedAngleList"] = part1.includedAngleList || [];
                return p;
            });
            part1.children = deepClone2(checkL2);
            treeData2.value[1].children = treeData2.value[1].children.concat(
                deepClone2(checkL11)
            );
        }
    }
    delTree2CheckedKeys(treeData2.value);
    if (sizeOrParts.value == "sizeAndColor") {
        treeData1.value = changePartsToSkuFun(
            treeData2.value,
            colorDataCopy.value
        );
    }
};
// 移动到配件齋架
const changePartType = () => {
    if (sizeOrParts.value == "sizeAndColor") {
        let treeCheckedKeys = treeRef1.value.getCheckedKeys(false);
        let list1 = resChecked1(
            treeData2.value[0].children,
            true,
            treeCheckedKeys
        );
        let list2 = resChecked1(
            treeData2.value[0].children,
            false,
            treeCheckedKeys
        );
        let list3 = resChecked1(
            treeData2.value[1].children,
            true,
            treeCheckedKeys
        );
        let list4 = resChecked1(
            treeData2.value[1].children,
            false,
            treeCheckedKeys
        );
        let part1 = list2.concat(list3);
        let part2 = list4.concat(list1);
        treeData2.value[0].children = deepClone2(part1);
        treeData2.value[1].children = deepClone2(part2);
        treeData1.value = changePartsToSkuFun(
            treeData2.value,
            colorDataCopy.value
        );
    } else if (sizeOrParts.value == "parts") {
        let list1 = resChecked(treeData2.value[0].children, true);
        let list2 = resChecked(treeData2.value[0].children, false);
        let list3 = resChecked(treeData2.value[1].children, true);
        let list4 = resChecked(treeData2.value[1].children, false);
        let part1 = list2.concat(list3);
        let part2 = list4.concat(list1);
        treeData2.value[0].children = deepClone2(part1);
        treeData2.value[1].children = deepClone2(part2);
        delTree2CheckedKeys(treeData2.value);
    }
};
// 返回选中配件齋架(去掉颜色选择) --- 不选中flag = flase
const resChecked = (partList, flag = true) => {
    let list = [];
    partList.forEach((item) => {
        if (item.checked == true && flag == true) {
            item["colorListCheck"] = [];
            list.push(item);
        } else if (!item.checked && flag == false) {
            list.push(item);
        }
    });
    return deepClone2(list);
};
// 返回选中配件齋架(去掉颜色选择) --- 不选中flag = flase
const resChecked1 = (partList, flag = true, treeCheckedKeys) => {
    let list = [];
    partList.forEach((item) => {
        if (treeCheckedKeys.includes(item.ida) && flag == true) {
            item["colorListCheck"] = [];
            list.push(item);
        } else if (!treeCheckedKeys.includes(item.ida) && flag == false) {
            list.push(item);
        }
    });
    return deepClone2(list);
};
// 获取配件
const getCheckedList = (idaList) => {
    let checkedList = [];
    function getItem(arr) {
        arr.forEach((item) => {
            if (idaList.includes(item.ida)) {
                checkedList.push(item);
            }
            if (item.children) {
                getItem(item.children);
            }
        });
    }
    getItem(treeData2.value);
    return checkedList;
};
// 自制旧 转 自制新
const changeAccessorySpecOrderTypeFun = () => {
   
    
    let treeCheckedKeys = [];
    if (sizeOrParts.value == "sizeAndColor") {
        treeCheckedKeys = treeRef1.value.getCheckedKeys(false);
    } else if (sizeOrParts.value == "parts") {
        treeCheckedKeys = getTree2CheckedKeys(treeData2.value);
    }
    if (treeCheckedKeys.length != 1) {
        ElNotification({
            title: "请选择一个配件",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    let checkItem = getCheckedList(treeCheckedKeys);
    if (checkItem[0].ID) {
        if (checkItem[0].orderType != "自制/舊") {
            ElNotification({
                title: "请选择一个自制/舊配件",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            return;
        }
        ElMessageBox.confirm("确定要自制旧转自制新?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            let  shejiandchanpin
           if( props.delType=="partSpecification1"){
            shejiandchanpin="accessory_spec"
           }
           if( props.delType=="partSpecification2"){
            shejiandchanpin="design_accessory_spec"
           }
            changeAccessorySpecOrderType({ id: checkItem[0].ID,whichSpec:shejiandchanpin }).then(
                (res) => {
                    if (res.code == 0) {
                        checkItem[0].orderType = "自制/新";
                        if (sizeOrParts.value == "sizeAndColor") {
                            treeData1.value = changePartsToSkuFun(
                                treeData2.value,
                                colorDataCopy.value
                            );
                        }
                    }
                }
            );
        });
    } else {
        ElNotification({
            title: "请先保存",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
    }
};

/**************移出子层-移至子层 end*****************/

onMounted(async () => {
    // 修改尺码，所关联值同步修改
    emitter.on("sizeChangeFun", (sizeChangeVal) => {
        let list2 = deepClone2(treeData2.value);
        list2.forEach((list2Item) => {
            list2Item.children.forEach((row) => {
                if (sizeChangeVal.type == "edit") {
                    treeJiaJiaoEdit([row], sizeChangeVal);
                    row.sizeListCheck.forEach((item, i) => {
                        if (sizeChangeVal.sizeOld == item) {
                            row.sizeListCheck[i] = sizeChangeVal.sizeNew;
                        }
                    });
                } else if (sizeChangeVal.type == "del") {
                    // 尺码
                    row.sizeListCheck.forEach((item, i) => {
                        if (sizeChangeVal.sizeOld == item) {
                            row.sizeListCheck.splice(i, 1);
                        }
                    });
                    // 夹角
                    treeJiaJiaoDel([row], row.sizeListCheck);
                }
            });
        });
        treeData2.value = list2;
        treeData1.value = changePartsToSkuFun(
            treeData2.value,
            colorDataCopy.value
        );
    });
    nextTick(() => {
        robot.value = document.getElementById("gva-base-load-dom");
    });
});
// 获取配件列表
watch(
    () => treeData2.value,
    () => {
        let list = deepClone2(treeData2.value);
        let partsList = [];
        list.forEach((item) => {
            item.children?.forEach((item1) => {
                if (item1.ida) {
                    let index = partsList.findIndex((res) => {
                        return res.label == item.label;
                    });
                    if (index == -1) {
                        partsList.push(item1);
                    }
                }
                if (item1.children && item1.children.length >= 0) {
                    item1.children.forEach((item2) => {
                        if (item2.ida) {
                            let index = partsList.findIndex((res) => {
                                return res.label == item2.label;
                            });
                            if (index == -1) {
                                partsList.push(item2);
                            }
                        }
                    });
                }
            });
        });
        emit("getSelfPartsFun", partsList);
    },
    { deep: true }
);

// 获取树数据
const getTreeDataFun = () => {
    let obj = {};
    // if (sizeOrParts.value == "sizeAndColor") {
    //     obj = {
    //         treeData: deepClone2(treeData1.value),
    //         type: "treeData1",
    //     };
    // }
    // if (sizeOrParts.value == "parts") {
    //     obj = {
    //         treeData: deepClone2(treeData2.value),
    //         type: "treeData2",
    //     };
    // }
    obj = {
        treeData: deepClone2(treeData2.value),
        type: "treeData2",
    };
    return obj;
};

defineExpose({ colorChangeFun, updateTreeData, getTreeDataFun, addCopyPart });
</script>

<style lang="scss" scoped>
.table-form {
    .el-form-item {
        margin-bottom: 0;
        width: 80%;
    }
}

.peijianguigeqingdan {
    :deep(.el-table__body-wrapper) {
        display: none;
    }
    :deep(.cell) {
        font-size: 10px;
        padding: 4px 0 !important;
    }
}
.peijian-el {
    :deep(.el-dialog__body) {
        height: 571px !important;
    }
}
.peijian-el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    margin-right: 30px;
    flex-direction: column;
    height: 571px !important;
    // justify-content: space-between;
    :deep(.el-checkbox) {
        margin-left: 10px;
    }
    :deep(.peijian-item) {
        display: flex;
        align-items: center;
        flex: 0 0 23px;
        width: calc(25% - 16px);
        margin-bottom: 5px;
        border: 1px solid #ccc;
        padding: 2px 2px;
        margin-right: 10px;
        .el-input-number__increase,
        .el-input-number__decrease {
            width: 12px;
        }
    }
}

.custom-tree-node {
    display: flex;
    align-items: center;
    padding: 1px 0;
    // height: auto;
    height: 24px;
    width: 100%;
    .custom-tree-node-item {
        flex: 0 1 10%;
        padding: 0 5px;
        position: relative;
        display: flex;
        word-break: break-word;
        white-space: normal;
        font-size: 12px;
        align-items: center;
        line-height: normal;
    }
    .custom-tree-node-item-2 {
        .ipt1 {
            width: 72%;
        }
        .ipt2 {
            width: 26%;
            margin-left: 2%;
        }
    }
    .custom-tree-node-item-4 {
        .ipt1 {
            width: 30px;
            cursor: pointer;
            color: red;
            text-align: center;
        }
        .ipt2 {
            width: calc(100% - 30px);
        }
    }
    .custom-tree-node-item-9 {
        .ipt1 {
            width: calc(100% - 23px);
        }
        .ipt2 {
            width: 30px;
            color: red;
            font-size: 10px;
            text-align: center;
            cursor: pointer;
        }
    }
    .err-note {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 15px;
        color: red;
        font-size: 10px;
        pointer-events: none;
    }
    :deep(.el-input__wrapper) {
        padding: 1px 3px;
        font-size: 12px;
    }
    :deep(.el-select__wrapper) {
        padding: 1px 3px;
        font-size: 12px;
    }
    :deep(.el-select__placeholder) {
        font-size: 12px;
        text-overflow: inherit;
    }
}
:deep(.my-tree1) {
    .el-tree-node__content {
        border-bottom: 1px solid #ccc7;
        border-left: 1px solid #ccc7;
        border-right: 1px solid #ccc7;
        // margin: 2px 0;
        height: auto;
    }
    .is-title1 {
        & > .el-tree-node__content {
            background: #fcfdc3;
            & > .el-checkbox {
                display: none;
            }
        }
    }
    .is-title2 {
        & > .el-tree-node__content {
            color: blue;
            font-weight: 700;
            background: #ccc6;
            // padding-left: 0;
            // margin-left: 18px !important;
            & > .el-checkbox {
                display: none;
            }
        }
        .el-tree-node__expand-icon {
            display: none !important;
        }
    }
    .tree-level-3 .el-tree-node__content {
        position: relative;
        // &::before {
        //     content: "";
        //     position: absolute;
        //     top: 0;
        //     // left: 21px;
        //     left: 2px;
        //     height: 100%;
        //     width: 20px;
        //     background: #ccc;
        //     background: url(@/assets/icons/drag-icon.jpg) no-repeat;
        //     background-position-y: 50%;
        //     cursor: move;
        // }
        .custom-tree-node-item-drag {
            cursor: move;
        }
    }
    .tree-level-3 > .el-tree-node__content {
        padding-left: 16px !important;
    }
    .tree-level-4 > .el-tree-node__content {
        padding-left: 16px !important;
    }
    .tree-level-3
        > .el-tree-node__content
        > .custom-tree-node
        > .custom-tree-node-item {
        // flex: 0 0 calc((100% - 116px) / 10);
        // flex: 0 0 calc((100% - 56px) / 10);
        // width: 0;
        &:nth-child(1) {
            flex: 1;
            width: 0;
        }
    }
    .tree-level-4
        > .el-tree-node__content
        > .custom-tree-node
        > .custom-tree-node-item {
        // flex: 0 0 calc((100% - 30px) / 10);
        // width: 0;
        &:nth-child(1) {
            flex: 1;
            width: 0;
            padding-left: 15px;
            // max-width: 100px;
        }
    }
    .tree-level-4 .custom-tree-node {
        background: #e1f3fb;
    }
}
.my-tree2 {
    border-bottom: 1px solid rgba(204, 204, 204, 0.4666666667);
    .custom-tree-node {
        border-top: 1px solid rgba(204, 204, 204, 0.4666666667);
        height: 24px;
    }
    .is-title1 {
        background: #ccc6;
        border-bottom: 1px solid rgba(204, 204, 204, 0.4666666667);
        height: 22px;
    }
    .custom-tree-node-item99 {
        flex: 0 0 162px;
        height: 24px;
        display: flex;
        align-items: center;
        :deep(.el-checkbox) {
            background: #fff;
            height: 24px;
        }
    }
    .custom-tree-node-item44 {
        background: #e1f3fb;
        padding: 0;
    }
    .custom-tree-node-item33-2 {
        padding: 0px 0;
    }
    .color-check {
        border-top: 1px solid #ccc;
        display: flex;
        background: aliceblue;
    }
    .part-row:nth-child(odd) {
        // background: aliceblue;
    }
}
:deep(.my-tree2) {
    .el-tree-node__content {
        border-bottom: 1px solid #ccc7;
        // margin: 2px 0;
        height: auto;
    }
    .is-title1 {
        background: #ccc6;
        & > .el-tree-node__content {
            background: #ccc6;
        }
        .el-icon {
            padding: 6px;
            cursor: pointer;
        }
    }
    .is-title2 {
        & > .el-tree-node__content {
            background: #fcfdc3;
            // padding-left: 0;
            // margin-left: 18px !important;
        }
        .el-tree-node__expand-icon {
            display: none !important;
        }
    }
    .tree-level-1 > .el-tree-node__content > .el-checkbox {
        display: none;
    }
    .tree-level-2 > .el-tree-node__content > .el-checkbox {
        display: none;
    }
    .tree-level-3
        > .el-tree-node__content
        > .custom-tree-node
        > .custom-tree-node-item {
        // flex: 0 0 calc((100% - 116px) / 10);
        // flex: 0 0 calc((100% - 56px) / 10);
        // width: 0;
        &:nth-child(1) {
            flex: 1;
            width: 0;
        }
    }
    .tree-level-4
        > .el-tree-node__content
        > .custom-tree-node
        > .custom-tree-node-item {
        &:nth-child(1) {
            flex: 1;
            width: 0;
            padding-left: 15px;
        }
    }
    .tree-level-4 .custom-tree-node {
        background: #e1f3fb;
    }
    .tree-level-3 > .el-tree-node__content {
        padding-left: 16px !important;
    }
    .tree-level-4 > .el-tree-node__content {
        padding-left: 16px !important;
    }
}

:deep(.el-tree-node__content > label.el-checkbox) {
    margin-right: 4px;
}

.custom-tree-node-item33 {
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 130px);
    // flex: 0 0 calc(100% - 40px);
    .custom-tree-node-item {
        padding: 0 1px;
        box-sizing: border-box;
        // flex: 0 1 11%;
        width: 0;
    }
    .custom-tree-node-item-1 {
        flex: 0 1 76px;
        :deep(.el-select__suffix) {
            display: none;
        }
    }
    .custom-tree-node-item-2 {
        flex: 0 1 250px;
    }
    .custom-tree-node-item-3 {
        flex: 0 1 5%;
    }
    .custom-tree-node-item-4 {
        flex: 0 1 21%;
    }
    .custom-tree-node-item-5 {
        flex: 0 1 10%;
    }
    .custom-tree-node-item-6 {
        flex: 0 1 7%;
        .el-input__inner {
            font-size: 10px !important;
        }
    }
    .custom-tree-node-item-7 {
        flex: 0 1 70px;
    }
    .custom-tree-node-item-8 {
        flex: 0 1 13%;
    }
    .custom-tree-node-item-9 {
        flex: 0 1 14%;
    }
}
.custom-tree-node-item44 {
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 130px);
    // flex: 0 0 calc(100% - 20px);
    .custom-tree-node-item {
        padding: 0 1px;
        // flex: 0 1 11%;
    }
    .custom-tree-node-item-1 {
        flex: 0 1 76px;
    }
    .custom-tree-node-item-2 {
        flex: 0 1 250px;
        // min-width: 146px;
    }
    .custom-tree-node-item-3 {
        flex: 0 1 5%;
        // min-width: 37px;
    }
    .custom-tree-node-item-4 {
        flex: 0 1 21%;
        // min-width: 155px;
    }
    .custom-tree-node-item-5 {
        flex: 0 1 10%;
        // min-width: 74px;
    }
    .custom-tree-node-item-6 {
        // min-width: 37px;
        flex: 0 1 7%;
        .el-input__inner {
            font-size: 10px !important;
        }
    }
    .custom-tree-node-item-7 {
        flex: 0 1 70px;
    }
    .custom-tree-node-item-8 {
        flex: 0 1 13%;
        // min-width: 106px;
    }
    .custom-tree-node-item-9 {
        flex: 0 1 14%;
        // min-width: 81px;
    }
}
.my-tree2 {
    .custom-tree-node-item33 {
        // width: calc(100% - 156px);
    }
    :deep(
            .el-checkbox__input.is-disabled.is-checked
                .el-checkbox__inner::after
        ) {
        border-color: var(--el-checkbox-checked-icon-color);
    }
    :deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
        background-color: var(--el-checkbox-checked-bg-color);
        border-color: var(--el-checkbox-checked-input-border-color);
    }
    :deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
        color: var(--el-checkbox-checked-text-color);
    }
}

.peijianguigeqingdan-tr {
    display: flex;
    text-align: left;
    border: 1px solid #ccc6;
    border-left: none;
    background-color: #f7fbff;
    th {
        border-left: 1px solid #ccc6;
        padding: 4px 0;
        color: #374151;
        font-weight: 600;
    }
    th:nth-child(1) {
        flex: 0 1 160px;
    }
    th:nth-child(2) {
        flex: 0 1 72px;
    }
    th:nth-child(3) {
        flex: 0 1 180px;
    }
    th:nth-child(4) {
        flex: 0 1 65px;
    }
    th:nth-child(5) {
        flex: 0 1 calc(calc(100% - 543px) * 0.07);
    }
    th:nth-child(6) {
        flex: 0 1 calc(calc(100% - 543px) * 0.3);
    }
    th:nth-child(7) {
        flex: 0 1 calc(calc(100% - 543px) * 0.14);
    }
    th:nth-child(8) {
        flex: 0 1 calc(calc(100% - 543px) * 0.1);
    }
    th:nth-child(9) {
        flex: 0 1 70px;
    }
    th:nth-child(10) {
        flex: 0 1 calc(calc(100% - 543px) * 0.18);
    }
    th:nth-child(11) {
        flex: 0 1 calc(calc(100% - 543px) * 0.14);
    }
}
.targetPartDialog-tr {
    display: flex;
    text-align: left;
    border: 1px solid #ccc6;
    border-left: none;
    background-color: #f7fbff;
    th {
        border-left: 1px solid #ccc6;
        padding: 4px 0;
        color: #374151;
        font-weight: 600;
        flex: 1;
    }
    th:nth-child(1) {
        flex: 0 0 52px;
        width: 52px;
    }
}
@media (min-width: 1675px) and (max-width: 1925px) {
    .custom-tree-node-item33 {
        width: calc(100% - 153px);
    }
    .custom-tree-node-item44 {
        width: calc(100% - 153px);
    }
    //   :deep(.peijianguigeqingdan-col){
    //     width: 190px !important;
    //   }
    .peijianguigeqingdan-tr {
        th:nth-child(1) {
            flex: 0 1 225px;
        }
        th:nth-child(2) {
            flex: 0 1 70px;
        }
        th:nth-child(3) {
            flex: 0 1 190px;
        }
        th:nth-child(4) {
            flex: 0 1 65px;
        }
        th:nth-child(5) {
            flex: 0 1 calc(calc(100% - 538px) * 0.06);
        }
        th:nth-child(6) {
            flex: 0 1 calc(calc(100% - 538px) * 0.28);
        }
        th:nth-child(7) {
            flex: 0 1 calc(calc(100% - 538px) * 0.14);
        }
        th:nth-child(8) {
            flex: 0 1 calc(calc(100% - 538px) * 0.1);
        }
        th:nth-child(9) {
            flex: 0 1 70px;
        }
        th:nth-child(10) {
            flex: 0 1 calc(calc(100% - 538px) * 0.18);
        }
        th:nth-child(11) {
            flex: 0 1 calc(calc(100% - 538px) * 0.18);
        }
    }
}

.copy-checked {
    :deep(.el-form-item) {
        margin-bottom: 15px;
    }
}

.import-part {
    :deep(.el-table__header-wrapper .el-table__header .el-checkbox) {
        display: none;
    }
}
.size-list-check {
    display: flex;
    width: 362px;
    :deep(.el-checkbox-group) {
        display: flex;
        flex-wrap: wrap;
        & > div {
            margin-right: 8px;
        }
    }
}
.color-list-check {
    display: flex;
    flex: 1;
    :deep(.el-checkbox-group) {
        display: flex;
        flex-wrap: wrap;
        & > div {
            margin-right: 8px;
        }
    }
}
:deep(.el-table .cell) {
    padding-right: 0;
    padding-left: 3px;
}
:deep(.el-table__header) {
    width: 100% !important;
}
.move-part {
    .move-part-title {
        background: rgba(204, 204, 204, 0.4);
    }
}
:deep(.el-checkbox) {
    height: 24px;
}
.ipt-disabled {
    background: #f5f7fa;
}
</style>
<style lang="scss">
.my-message {
    .el-message__badge {
        display: none;
    }
}
.bom-dialog {
    .bom-dialog-title {
        font-size: 16px;
    }
    .el-dialog__header {
        padding-bottom: 3px;
    }
}
</style>
<style lang="scss" scoped>
.self-compoment {
    input,
    select {
        border: solid 1px #ddd;
        height: 24px;
        border-radius: 3px;
        outline: none;
        width: 100%;
        option {
            font-size: 18px;
        }
        &:focus {
            border-color: rgb(77, 112, 255);
        }
    }
    .option {
        padding: 10px 3px;
        height: 31px;
    }
}
.change-item {
    :deep(.el-select__wrapper) {
        height: 32px;
        min-height: 32px;
    }
}
.fullscreen-handle {
    padding: 0 20px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    background: #fff;
    overflow: scroll;
    .self-compoment {
        height: calc(100vh - 188px);
        overflow: scroll;
    }
}
:deep(.draggable-dialog-box){
    .el-dialog{
        padding-top: 0;
    }
    .el-dialog__header{
        padding-top: 16px;
    }
}
</style>